From e98e06a1a9d9da9e81becf905c738171d797f745 Mon Sep 17 00:00:00 2001
From: Adrien Crivelli <adrien.crivelli@gmail.com>
Date: Thu, 17 Oct 2024 13:03:29 +0200
Subject: [PATCH] Deprecate `graphql` alias for `gql` tag function

Because importing the same thing from two different import points will
increase the final bundle size. If you want a different name for the tag
function, then use `as` syntax, such as:

```ts
import {gql as graphql} from 'apollo-angular';
```
---
 .changeset/nine-pets-wait.md           | 13 +++++++++++++
 packages/apollo-angular/src/gql.ts     |  4 ++++
 website/src/pages/docs/get-started.mdx |  6 +++---
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/nine-pets-wait.md

diff --git a/.changeset/nine-pets-wait.md b/.changeset/nine-pets-wait.md
new file mode 100644
index 000000000..a8569b3b7
--- /dev/null
+++ b/.changeset/nine-pets-wait.md
@@ -0,0 +1,13 @@
+---
+'apollo-angular': patch
+---
+
+Deprecate `graphql` alias for `gql` tag function
+
+Because importing the same thing from two different import points will
+increase the final bundle size. If you want a different name for the tag
+function, then use `as` syntax, such as:
+
+```ts
+import {gql as graphql} from 'apollo-angular';
+```
diff --git a/packages/apollo-angular/src/gql.ts b/packages/apollo-angular/src/gql.ts
index 33b2a1775..0f9570150 100644
--- a/packages/apollo-angular/src/gql.ts
+++ b/packages/apollo-angular/src/gql.ts
@@ -6,4 +6,8 @@ const typedGQLTag: <Result, Variables>(
 ) => TypedDocumentNode<Result, Variables> = gqlTag;
 
 export const gql = typedGQLTag;
+
+/**
+ * @deprecated Instead, use `import {gql as graphql} from 'apollo-angular';`. Because different exports for the same thing will increase the final bundle size.
+ */
 export const graphql = typedGQLTag;
diff --git a/website/src/pages/docs/get-started.mdx b/website/src/pages/docs/get-started.mdx
index 4913e2ccb..78c9358a6 100644
--- a/website/src/pages/docs/get-started.mdx
+++ b/website/src/pages/docs/get-started.mdx
@@ -99,9 +99,9 @@ Once all is hooked up, you're ready to start requesting data with `Apollo` servi
 The `Apollo` is an Angular service exported from `apollo-angular` to share GraphQL data with your
 UI.
 
-First, pass your GraphQL query wrapped in the `gql` or `graphql` function (from `apollo-angular`) to
-the `query` property in the `Apollo.watchQuery` method, in your component. The `Apollo` service is a
-regular angular service available to you, and your data is streamed through Observables.
+First, pass your GraphQL query wrapped in the `gql` function (from `apollo-angular`) to the `query`
+property in the `Apollo.watchQuery` method, in your component. The `Apollo` service is a regular
+angular service available to you, and your data is streamed through Observables.
 
 The `watchQuery` method returns a `QueryRef` object which has the `valueChanges` property that is an
 `Observable`.