Modern Ember GraphQL integration, TypeScript and GraphQL-Codegen friendly.
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
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 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.
README
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: {
// ...
},
});
}
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';
See the Contributing guide for details.
This project is licensed under the MIT License.