ember-use-graphql

Modern Ember GraphQL integration, TypeScript and GraphQL-Codegen friendly.

Installation

Using npm:

npm install -D ember-use-graphql graphql @apollo/client graphql-tag

Using yarn:

yarn add -D ember-use-graphql graphql @apollo/client graphql-tag

Using pnpm:

pnpm add -D ember-use-graphql graphql @apollo/client graphql-tag

Usage

Provide the Apollo client

In order to provide an Apollo client to be used by ember-use-graphql, create an application initializer in your app/initializers directory:

// app/initializers/apollo.js

import { ApolloClient, InMemoryCache } from '@apollo/client/core';

export function initialize(application) {
  const client = new ApolloClient({
    cache: new InMemoryCache(),
    uri: 'https://example.com/graphql',
  });

  application.register('apollo:default', client, { instantiate: false });
}

export default {
  name: 'apollo',
  initialize,
};

In this example the Apollo client is registered under the name apollo:default, and will then be the default client for performing GraphQL operations, unless specified otherwise.

Queries

Queries can be performed in Components or Routes' models using ember-use-graphql's useQuery function.

The results returned by useQuery are reactive, and will keep up to date with Apollo client's cache.

ember-use-graphql manages the lifecycle of queries by listening to the Component/Route's events, DO NOT call useQuery in Controllers or outside of the Route's model method.

Component queries

README

Advanced usage

Use several Apollo clients

If your application needs to use several Apollo clients, you will need to register these under different names in the application initializer:

// app/initializers/apollo.js

import { ApolloClient, InMemoryCache } from '@apollo/client/core';

export function initialize(application) {
  const defaultClient = new ApolloClient({
    cache: new InMemoryCache(),
    uri: 'https://api.example.com/graphql',
  });

  application.register('apollo:default', defaultClient, { instantiate: false });

  const alternateClient = new ApolloClient({
    cache: new InMemoryCache(),
    uri: 'https://private-api.example.com/graphql',
  });

  application.register('apollo:alternate', alternateClient, { instantiate: false });
}

export default {
  name: 'apollo',
  initialize,
};

Then you must specify which client should be used when querying:

// app/components/example.js

export default class ExampleComponent extends Component {
  // no client specified, will use defaultClient
  firstQuery = useQuery(this, gql`...`, {
    variables: {
      // ...
    },
  });

  // will use alternateClient
  secondQuery = useQuery(this, gql`...`, {
    client: 'alternate',
    variables: {
      // ...
    },
  });
}

Common problems

ts(2742): The inferred type of 'x' cannot be named without a reference to '@apollo/client/core'

This error might occur when using pnpm, the node_modules layout generated by pnpm messes Typescript's type inference.

To workaround this error, add the following line in the types/global.d.ts file of your Ember app:

import '@apollo/client/core';

Compatibility

• Ember.js v4.12 or above
• Embroider or ember-auto-import v2

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.