Skip to content

Commit

Permalink
Deprecate graphql alias for gql tag function
Browse files Browse the repository at this point in the history
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';
```
  • Loading branch information
PowerKiKi committed Oct 17, 2024
1 parent 8bbdc6b commit e98e06a
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 3 deletions.
13 changes: 13 additions & 0 deletions .changeset/nine-pets-wait.md
Original file line number Diff line number Diff line change
@@ -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';
```
4 changes: 4 additions & 0 deletions packages/apollo-angular/src/gql.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
6 changes: 3 additions & 3 deletions website/src/pages/docs/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down

0 comments on commit e98e06a

Please sign in to comment.