{"id":13700827,"url":"https://github.com/ember-graphql/ember-apollo-client","last_synced_at":"2025-05-16T15:08:12.231Z","repository":{"id":34844825,"uuid":"78405075","full_name":"ember-graphql/ember-apollo-client","owner":"ember-graphql","description":"🚀 An ember-cli addon for Apollo Client and GraphQL","archived":false,"fork":false,"pushed_at":"2023-05-05T15:28:13.000Z","size":4347,"stargazers_count":279,"open_issues_count":28,"forks_count":71,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-12T05:48:14.028Z","etag":null,"topics":["apollo-client","ember","ember-addon","emberjs","graphql"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ember-graphql.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-01-09T07:36:20.000Z","updated_at":"2025-03-17T14:54:30.000Z","dependencies_parsed_at":"2023-07-17T17:42:25.416Z","dependency_job_id":null,"html_url":"https://github.com/ember-graphql/ember-apollo-client","commit_stats":{"total_commits":484,"total_committers":52,"mean_commits":9.307692307692308,"dds":0.6880165289256198,"last_synced_commit":"d329860d778b666fe6e3789d84dbf8d945debe3f"},"previous_names":["bgentry/ember-apollo-client"],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-graphql%2Fember-apollo-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-graphql%2Fember-apollo-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-graphql%2Fember-apollo-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-graphql%2Fember-apollo-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ember-graphql","download_url":"https://codeload.github.com/ember-graphql/ember-apollo-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254153387,"owners_count":22023603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo-client","ember","ember-addon","emberjs","graphql"],"created_at":"2024-08-02T20:01:02.336Z","updated_at":"2025-05-16T15:08:07.221Z","avatar_url":"https://github.com/ember-graphql.png","language":"JavaScript","readme":"# ember-apollo-client\n\n_Use [@apollo/client][apollo-client] and GraphQL from your Ember app._\n\n![Download count all time](https://img.shields.io/npm/dt/ember-apollo-client.svg)\n[![npm version](https://badge.fury.io/js/ember-apollo-client.svg)](https://badge.fury.io/js/ember-apollo-client)\n[![Build Status](https://github.com/ember-graphql/ember-apollo-client/workflows/CI/badge.svg)](https://github.com/ember-graphql/ember-apollo-client/actions)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-apollo-client.svg)](https://emberobserver.com/addons/ember-apollo-client)\n\nThis addon is battle tested: it has been used to build several large apps. As such, we've solved real-world problems such as reliable testing and preventing resource leaks by unsubscribing from watch queries.\n\n## Installation\n\n```\nember install ember-apollo-client\n```\n\nThis should also automatically install `ember-fetch` and `graphql`.\n\nInstall the [Apollo Client Developer tools for Chrome](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm) for a great GraphQL developer experience!\n\n## Compatibility\n\n* Apollo Client v3.0 or above\n* Ember.js v3.24 or above\n* Ember CLI v2.13 or above\n* Node.js v12 or above\n* FastBoot 1.0+\n\nFor compatibility with Ember versions below 3.4, use version 1.x.\nFor compatibility with Apollo Client v1 or v2, use version 1.x or 2.x of this addon.\n\n## Configuration\n\n### Runtime configuration\n\nIn your app's `config/environment.js`, configure the URL for the GraphQL API.\n\n```js\nlet ENV = {\n  ...\n  apollo: {\n    apiURL: 'https://test.example/graphql',\n    \n    // Optionally, set the credentials property of the Fetch Request interface\n    // to control when a cookie is sent:\n    // requestCredentials: 'same-origin', // other choices: 'include', 'omit'\n    \n    // Optionally, define which service a query manager should use by default:\n    // defaultQueryManagerService: 'my-custom-apollo-service',\n  },\n  ...\n}\n```\n\nAdditional configuration of the ApolloClient can be done by extending the Apollo\nservice and overriding the `clientOptions` property. See the\n[Apollo Service API][apollo-service-api] for more info.\n\n### Build time configuration\n\nIn your app's `ember-cli-build.js`, you can set build time options for [broccoli-graphql-filter](https://github.com/csantero/broccoli-graphql-filter) to keep or remove file extensions in `.graphql` files.\n\n```js\nmodule.exports = function(defaults) {\n  let app = new EmberApp(defaults, {\n    emberApolloClient: {\n      keepGraphqlFileExtension: false\n    }\n  });\n\n  return app.toTree();\n};\n\n```\n\n`keepGraphqlFileExtension = true`, defaults to `true` – If `false`, creates files called `my-query.js` instead of `my-query.graphql.js`, so that you can import them as `./my-query` instead of `./my-query.graphql`.\n\nExample:\n\n```js\nimport myQuery from 'my-app/queries/my-query.graphql';\n```\n\n### Dependencies\n\nThis addon uses [ember-auto-import](https://github.com/ef4/ember-auto-import) to import dependencies.\n\nThis addon does not exposes any dependencies directly to your application, so\nif you desire any additional graphql or apollo dependencies, install them with\nnpm/yarn and import as desired.\n\nHere are some useful packages:\n\n* [@apollo/client][apollo-client]\n* [graphql-tag][graphql-tag-repo]\n* [graphql-tools][graphql-tools-repo]\n\n[graphql-repo]: https://github.com/graphql/graphql-js \"GraphQL\"\n[graphql-tag-repo]: https://github.com/apollographql/graphql-tag \"graphql-tag\"\n[graphql-tools-repo]: https://github.com/apollographql/graphql-tools \"graphql-tools\"\n\nMake sure to use ember-auto-import in your application to import these\nadditional packages.\n\n#### Peer Dependencies\n\nThis addon has a peer dependency of:\n\n* [graphql][graphql-repo]\n\n## Usage\n\n### Fetching data\n\nGraphQL queries should be placed in external files, which are automatically\nmade available for import:\n\n`app/gql/queries/human.graphql`\n\n```graphql\nquery human($id: String!) {\n  human(id: $id) {\n    name\n  }\n}\n```\n\nYou can also use the `graphql-tag` package to write your queries within your\nJS file:\n\n```js\nimport gql from \"graphql-tag\";\n\nconst query = gql`\n  query human($id: String!) {\n    human(id: $id) {\n      name\n    }\n  }\n`;\n```\n\n\u003e **Note:** Inline queries like the one above are compiled at *runtime*. This is\n\u003e both slower than external files (which are precompiled) and involves shipping\n\u003e extra dependencies in your vendor.js. For the time being, we recommend using\n\u003e external files for your queries.\n\u003e\n\u003e If you are looking for an opportunity to contribute, enabling precompilation\n\u003e of inline queries would be a fantastic feature to work on.\n\nWithin your routes, you can query for data using the `queryManager`\ncomputed macro and `watchQuery`:\n\n`app/routes/some-route.js`\n\n```js\nimport Route from \"@ember/routing/route\";\nimport { queryManager } from \"ember-apollo-client\";\nimport query from \"my-app/gql/queries/human.graphql\";\n\nexport default Route.extend({\n  apollo: queryManager(),\n\n  model(params) {\n    let variables = { id: params.id };\n    return this.apollo.watchQuery({ query, variables }, \"human\");\n  }\n});\n```\n\nThis performs a [`watchQuery` on the ApolloClient][watch-query]. The resulting object is a POJO.\n\nIf a subsequent query (such as a mutation) happens to fetch the same data while\nthis query's subscription is still active, the object will immediately receive\nthe latest attributes (just like ember-data).\n\nPlease note that when using `watchQuery`, you must\n[unsubscribe][unsubscribing] when you're done with the query data. You should\nonly have to worry about this if you're using the [Apollo\nservice][apollo-service-api] directly. If you use the `queryManager` computed macro in your routes, or in your data-loading\ncomponents or class that extend `Ember.Object`, all active watch queries are tracked and unsubscribed when the route is exited or the component and Ember.Object is destroyed.\n\nYou can instead use `query` if you just want a single query with a POJO\nresponse and no watch updates.\n\nIf you need to access the Apollo Client [ObservableQuery][observable-query],\nsuch as for pagination, you can retrieve it from a `watchQuery` result using\n`getObservable`:\n\n```js\nimport Route from \"@ember/routing/route\";\nimport { getObservable, queryManager} from \"ember-apollo-client\";\n\nexport default Route.extend({\n  apollo: queryManager(),\n\n  model() {\n    let result = this.apollo.watchQuery(...);\n    let observable = getObservable(result);\n    observable.fetchMore(...) // utilize the ObservableQuery\n    ...\n  }\n});\n```\n\nSee the [detailed query manager docs][query-manager-api] for more details on\nusage, or the [Apollo service API][apollo-service-api] if you need to use\nthe service directly.\n\n### GraphQL Subscriptions\n\nGQL Subscriptions allow a client to subscribe to specific queries they are interested in tracking. The syntax for doing this is similar to `query` / `watchQuery`, but there are a few main differences:\n\n- you must define a `subscription` (versus a `query` or `mutation`)\n- because subscriptions are async by nature, you have to listen for these events and act accordingly.\n- subscriptions require websockets, so must configure your `link` accordingly\n\n#### Creating your subscription\n\n`app/gql/subscriptions/new-human.graphql`\n\n```graphql\nsubscription {\n  newHuman() {\n    name\n  }\n}\n```\n\n#### Subscribing from inside a route\n\n`app/routes/some-route.js`\n\n```js\nimport Route from '@ember/routing/route';\nimport { queryManager } from 'ember-apollo-client';\nimport query from 'app/gql/subscriptions/new-human';\nimport { addListener, removeListener } from '@ember/object/events';\n\nconst handleEvent = event =\u003e alert(`${event.name} was just born!`);\n\nexport default Route.extend({\n  apollo: queryManager(),\n\n  model() {\n    return this.get('apollo').subscribe({ query }, 'human');\n  },\n\n  setupController(controller, model) {\n    addListener(model, 'event', handleEvent);\n  },\n\n  resetController(controller, isExiting, transition) {\n    if (isExiting) {\n      removeListener(controller.model, 'event', handleEvent);\n    }\n  }\n});\n```\n\nThe big advantage of using the `queryManager` is that when you navigate away from this route, all subscriptions created will be terminated. That said, if you want to manually unsubscribe (or are not using the `queryManager`) `subscription.unsubscribe()` will do the trick.\n\n**Enabling Websockets**\n\nWhile this library should work w/ any back-end implementation, here's an example with Authenticated [Phoenix](https://github.com/phoenixframework/phoenix) + [Absinthe](https://github.com/absinthe-graphql/absinthe):\n\n`my-app/services/apollo.js`\n```js\nimport ApolloService from 'ember-apollo-client/services/apollo';\nimport { inject as service } from '@ember/service';\nimport { Socket } from 'phoenix';\nimport { createAbsintheSocketLink } from '@absinthe/socket-apollo-link';\nimport AbsintheSocket from '@absinthe/socket';\n\nclass OverriddenApollo extends ApolloService {\n  @service\n  session;\n\n  link() {\n    const socket = new Socket(\"ws://socket-url\", {\n      params: { token: this.get('session.token') },\n    });\n    const absintheSocket = AbsintheSocket.create(socket);\n\n    return createAbsintheSocketLink(absintheSocket);\n  }\n}\n\n```\n\nNote: This will switch **all** gql communication to use websockets versus `http`.\nIf you want to conditionally use websockets for only subscriptions (a common pattern)\nthis is where [Apollo Link Composition](https://www.apollographql.com/docs/link/composition.html) comes in.\nSpecifically, the `split` function is what we're after (note we are using\n[apollo-utilities](https://www.npmjs.com/package/apollo-utilities), a helpful `npm` package):\n\n`my-app/services/apollo.js`\n```js\nimport ApolloService from 'ember-apollo-client/services/apollo';\nimport { inject as service } from '@ember/service';\nimport { Socket } from 'phoenix';\nimport { split } from '@apollo/client';\nimport { getMainDefinition } from '@apollo/client/utilities';\nimport { createAbsintheSocketLink } from '@absinthe/socket-apollo-link';\nimport AbsintheSocket from '@absinthe/socket';\n\nclass OverriddenApollo extends ApolloService {\n  @service\n  session;\n\n  link() {\n    let httpLink = super.link();\n\n    const socket = new Socket(\"ws://socket-url\", {\n      params: { token: this.get('session.token') },\n    });\n    const socketLink = createAbsintheSocketLink(AbsintheSocket.create(socket));\n\n    return split(\n      ({ query }) =\u003e {\n        const { kind, operation } = getMainDefinition(query);\n\n        return kind === 'OperationDefinition' \u0026\u0026 operation === 'subscription';\n      },\n      socketLink,\n      httpLink\n    );\n  }\n}\n```\n\nNote: You will need to add the following dependencies to your project:\n\n```sh\nyarn add -D @apollo/client\nyarn add -D @absinthe/socket\nyarn add -D @absinthe/socket-apollo-link\n```\n\n### Mutations and Fragments\n\nYou can perform a mutation using the `mutate` method. You can also use GraphQL\nfragments in your queries. This is especially useful if you want to ensure that\nyou refetch the same attributes in a subsequent query or mutation involving the\nsame model(s).\n\nThe following example shows both mutations and fragments in action:\n\n`app/gql/fragments/review-fragment.graphql`\n\n```graphql\nfragment ReviewFragment on Human {\n  stars\n  commentary\n}\n```\n\n`app/gql/mutations/create-review.graphql`\n\n```graphql\n#import ReviewFragment from 'my-app/gql/fragments/review-fragment.graphql'\n\nmutation createReview($ep: Episode!, $review: ReviewInput!) {\n  createReview(episode: $ep, review: $review) {\n    review {\n      ...ReviewFragment\n    }\n  }\n}\n```\n\n`app/routes/my-route.js`\n\n```js\nimport Route from \"@ember/routing/route\";\nimport { inject as service } from \"@ember/service\";\nimport mutation from \"my-app/gql/mutations/create-review.graphql\";\n\nexport default Route.extend({\n  apollo: service(),\n\n  actions: {\n    createReview(ep, review) {\n      let variables = { ep, review };\n      return this.get(\"apollo\").mutate({ mutation, variables }, \"review\");\n    }\n  }\n});\n```\n\n### Query manager API\n\n* `watchQuery(options, resultKey)`: This calls the\n  [`ApolloClient.watchQuery`][watch-query] method. It returns a promise that\n  resolves with a POJO. That object will be updated whenever the\n  `watchQuery` subscription resolves with new data. As before, the `resultKey`\n  can be used to resolve beneath the root.\n\n  The query manager will automatically unsubscribe from this object.\n* `subscribe(options, resultKey)`: This calls the\n  [`ApolloClient.subscribe`][subscribe] method. It returns a promise that\n  resolves with an `EmberApolloSubscription`. You can use this object in a few ways to keep\n  track of your subscription:\n  - emberApolloSubscription.lastEvent; // return the most recently received event data\n\n  ```js\n  //import { addListener, removeListener } from '@ember/object/events';\n\n  const result = await this.apollo.subscribe(\n    {\n      subscription: mySubscription,\n    }\n  );\n\n  const handleEvent = event =\u003e {\n    console.log('event received', event)\n  };\n\n  // Add listener to new data\n  addListener(result, 'event', handleEvent);\n\n  // Remove the listener from new data\n  removeListener(result, 'event', handleEvent);\n  ```\n\n  As before, the `resultKey` can be used to resolve beneath the root.\n\n  The query manager will automatically unsubscribe from this object. If you want to manually\n  unsubscribe, you can do so with `emberApolloSubscription.apolloUnsubscribe();`\n* `query(options, resultKey)`: This calls the\n  [`ApolloClient.query`](https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.query)\n  method. It returns a promise that resolves with the raw POJO data that the\n  query returns. If you provide a `resultKey`, the resolved data is grabbed from\n  that key in the result.\n* `mutate(options, resultKey)`: This calls the\n  [`ApolloClient.mutate`](https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.mutate)\n  method. It returns a promise that resolves with the raw POJO data that the\n  mutation returns. As with the query methods, the `resultKey` can be used to\n  resolve beneath the root.\n\n### Apollo service API\n\nYou should not need to use the Apollo service directly for most regular\nusage, instead utilizing the `queryManager` computed macro. However, you will probably need to customize options on the `apollo` service, and might need to query it directly for some use cases (such as\nloading data from a service rather than a route or component).\n\nThe `apollo` service has the following public API:\n\n* `clientOptions`: This function should return the options hash that\n  will be passed to the `ApolloClient` [constructor][ac-constructor]. You can\n  override this function to configure the client this service uses:\n  ```js\n  class OverriddenApolloService extends ApolloService {\n    clientOptions() {\n      return {\n        link: this.link(),\n        cache: this.cache(),\n      };\n    }\n  }\n  ```\n* `link`: This function provides a list of [middlewares and afterwares](https://www.apollographql.com/docs/react/advanced/network-layer.html#network-interfaces) to the [Apollo Link](https://www.apollographql.com/docs/link/) the interface for fetching and modifying control flow of GraphQL requests. To create your middlewares/afterwares:\n\n  ```js\n    link() {\n      let httpLink = super.link()\n\n      // Middleware\n      let authMiddleware = setContext(async(request, context) =\u003e {\n        if (!token) {\n          token = await localStorage.getItem('token') || null;\n        }\n\n        Object.assign(context.headers, {\n          headers: {\n            authorization: token\n          }\n        });\n\n        return context;\n      });\n\n      // Afterware\n      const resetToken = onError(({ networkError }) =\u003e {\n        if (networkError \u0026\u0026 networkError.statusCode === 401) {\n          // remove cached token on 401 from the server\n          token = undefined;\n        }\n      });\n\n      const authFlowLink = authMiddleware.concat(resetToken);\n\n      return authFlowLink.concat(httpLink);\n    }\n  ```\n\n  Example with [ember-simple-auth](https://github.com/simplabs/ember-simple-auth):\n\n\n  ```js\n  import ApolloService from 'ember-apollo-client/services/apollo';\n  import { inject as service } from '@ember/service';\n  import { setContext } from '@apollo/client/link/context';\n  import { Promise } from 'rsvp';\n\n  class OverriddenApollo extends ApolloService {\n    @service\n    session;\n\n    link() {\n      let httpLink = super.link();\n\n      let authLink = setContext((request, context) =\u003e {\n        return this._runAuthorize(request, context);\n      });\n      return authLink.concat(httpLink);\n    }\n\n    _runAuthorize() {\n      if (!this.get('session.isAuthenticated')) {\n        return {};\n      }\n      return new Promise(success =\u003e {\n        let headers = {};\n        let token = this.get('session.data.authenticated.token');\n        headers['Authorization'] = `Bearer ${token}`;\n\n        success({ headers });\n      });\n    }\n  }\n  ```\n\n  Note: You will need to add the following dependencies to your project:\n\n  ```sh\n  yarn add -D @apollo/client\n  ```\n\n* `watchQuery(options, resultKey)`: This calls the\n  [`ApolloClient.watchQuery`][watch-query] method. It returns a promise that\n  resolves with a POJO. That object will be updated whenever the\n  `watchQuery` subscription resolves with new data. As before, the\n  `resultKey` can be used to resolve beneath the root.\n\n  When using this method, **it is important to [unsubscribe][unsubscribing]**\n  from the query when you're done with it.\n\n* `query(options, resultKey)`: This calls the\n  `ApolloClient.query`\n  method. It returns a promise that resolves with the raw POJO data that the\n  query returns. If you provide a `resultKey`, the resolved data is grabbed from\n  that key in the result.\n* `mutate(options, resultKey)`: This calls the\n  `ApolloClient.mutate`\n  method. It returns a promise that resolves with the raw POJO data that the\n  mutation returns. As with the query methods, the `resultKey` can be used to\n  resolve beneath the root.\n\n### Unsubscribing from watch queries\n\nApollo Client's `watchQuery` will continue to update the query with new data\nwhenever the store is updated with new data about the resolved objects. This\nhappens until you explicitly unsubscribe from it.\n\nIn `ember-apollo-client`, most unsubscriptions are handled automatically by the\n`queryManager` computed macro, so long as you use it.\n\nIf you're fetching data elsewhere, such as in an Ember Service, or if you use\nthe Apollo service directly, you are responsible for unsubscribing from\n`watchQuery` results when you're done with them, you can use `unsubscribe`:\n\n```js\nimport Service from \"@ember/service\";\nimport { unsubscribe } from \"ember-apollo-client\";\nimport { inject as service } from '@ember/service';\n\nexport default Service.extend( {\n  apollo: service(),\n  result: null,\n\n  init() {\n    this._super(...arguments);\n    this.result = this.apollo.watchQuery(...);\n  },\n\n  willDestroy() {\n    unsubscribe(this.result)\n  }\n});\n```\n\n### queryManager as decorator\n\nThe `queryManager` computed macro can be used as a decorator when using Ember v3.10.0 or above.\n\n```js\nimport Route from '@ember/routing/route';\nimport { queryManager } from 'ember-apollo-client'\nimport query from 'my-app/gql/queries/human.graphql';\n\nexport default class MyAwesomeRoute extends Route {\n  @queryManager apollo;\n\n  model({ id }) {\n    let variables = { id };\n    return this.apollo.watchQuery({ query, variables });\n  }\n}\n```\n\n### queryManager options\n\nThe `queryManager` computed macro can accept an options hash with the name of the service to use as apollo.\nIf your application has a custom apollo service or multiple apollo services that extends from `ember-apollo-client/services/apollo`, you can use this option to specify which apollo service to use.\n\n```js\n// imports ...\n\nexport default class MyAwesomeRoute extends Route {\n  @queryManager({ service: 'my-custom-apollo-service' }) apollo;\n\n  // ...\n}\n```\n\n### Use with Fastboot\n\nEmber Apollo Client works with FastBoot out of the box as long that SSR is enabled. In order to enable SSR, define it on apollo service:\n\nExample:\n\n```js\nclass OverriddenApolloService extends ApolloService {\n  clientOptions() {\n    const opts = super.clientOptions();\n    return {...opts, ssrMode: true };\n  }\n}\n```\n\nSince you only want to fetch each query result once, pass the `ssrMode: true` option to the Apollo Client constructor to avoid repeated force-fetching.\n\n#### Skipping queries for SSR\n\nIf you want to intentionally skip a query during SSR, you can pass `ssr: false` in the query options. Typically, this will mean the component will get rendered in its loading state on the server. For example:\n\n```js\nactions: {\n  refetchModel() {\n    this.get('apollo').query({\n      query,\n      variables,\n      // Don't run this query on the server\n      ssr: false\n    });\n  }\n}\n```\n\n### Using With TypeScript\n\nWhen using TypeScript (with [ember-cli-typescript](https://github.com/typed-ember/ember-cli-typescript) in your Ember app) you will quickly run into an error like:\n\n\u003e Cannot find module './users.graphql'.\n\nThis error happens when you import a `*.graphql` file, e.g. `import query from './users.graphql';`.\nThe quick solution is to use `// @ts-ignore`, but that is only a patch for the one place you've used the import.\n\nTo define basic types for those imports, you need to add the following to `types/global.d.ts`:\n\n```ts\n// Apollo GraphQL imports\ndeclare module '*.graphql' {\n  const doc: import('graphql').DocumentNode;\n  export default doc;\n}\n```\n\nNote: The `graphql` module above is included when you `ember install ember-apollo-client`.\n\n### Testing\n\nThis addon is test-ready! All promises from the apollo service are tracked with\n`Ember.Test.registerWaiter`, so your tests should be completely deterministic.\n\nThe dummy app contains example routes for mutations and queries:\n\n* [Acceptance test for a regular query](https://github.com/ember-graphql/ember-apollo-client/blob/master/tests/acceptance/query-and-unsubscribe-test.js)\n* [Route integration test for a mutation with a fragment](https://github.com/ember-graphql/ember-apollo-client/blob/master/tests/unit/routes/new-review-test.js)\n\nThe tests also contain a sample Star Wars GraphQL schema with an\n[pretender setup][pretender-setup] for mock data.\n\n[pretender-setup]: https://github.com/ember-graphql/ember-apollo-client/blob/master/tests/helpers/start-pretender.js\n\n## Development\n\n### Installation\n\n* `git clone https://github.com/ember-graphql/ember-apollo-client` this repository\n* `cd ember-apollo-client`\n* `yarn install`\n\n### Linting\n\n* `yarn run lint:hbs`\n* `yarn run lint:js`\n* `yarn run lint:js --fix`\n\n### Running tests\n\n* `ember test` – Runs the test suite on the current Ember version\n* `ember test --server` – Runs the test suite in \"watch mode\"\n* `ember try:each` – Runs the test suite against multiple Ember versions\n\n### Running the dummy application\n\n* `ember serve`\n* Visit the dummy application at [http://localhost:4200](http://localhost:4200).\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n\n## Contributors\n\nA special thanks to the following contributors:\n\n* Blake Gentry ([@bgentry](https://github.com/bgentry))\n* Michael Villander ([@villander](https://github.com/villander))\n* Dan Freeman ([@dfreeman](https://github.com/dfreeman))\n* Vinícius Sales ([@viniciussbs](https://github.com/viniciussbs))\n* Laurin Quast ([@n1ru4l](https://github.com/n1ru4l))\n* Elias Balafoutis ([@balaf](https://github.com/balaf))\n* Katherine Smith ([@TerminalStar](https://github.com/TerminalStar))\n* Greg Coladarci ([@coladarci](https://github.com/coladarci))\n* Josemar Luedke ([@josemarluedke](https://github.com/josemarluedke))\n\n[ac-constructor]: https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClientOptions\n[apollo-client]: https://github.com/apollographql/apollo-client\n[apollo-service-api]: #apollo-service-api\n[observable-query]: https://www.apollographql.com/docs/react/api/apollo-client/#observablequery-functions\n[query-manager-api]: #query-manager-api\n[unsubscribing]: #unsubscribing-from-watch-queries\n[watch-query]: https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClient.watchQuery\n[subscribe]: https://www.apollographql.com/docs/react/api/apollo-client/#ApolloClient.subscribe\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","funding_links":[],"categories":["Implementations","JavaScript"],"sub_categories":["JavaScript/TypeScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fember-graphql%2Fember-apollo-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fember-graphql%2Fember-apollo-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fember-graphql%2Fember-apollo-client/lists"}