https://github.com/nlepage/ember-use-graphql
Modern Ember GraphQL integration.
https://github.com/nlepage/ember-use-graphql
apollo-client ember-addon emberjs graphql
Last synced: 5 months ago
JSON representation
Modern Ember GraphQL integration.
- Host: GitHub
- URL: https://github.com/nlepage/ember-use-graphql
- Owner: nlepage
- License: mit
- Created: 2024-03-22T14:13:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-07T12:45:11.000Z (about 1 year ago)
- Last Synced: 2024-12-28T06:28:03.090Z (6 months ago)
- Topics: apollo-client, ember-addon, emberjs, graphql
- Language: TypeScript
- Homepage:
- Size: 426 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-use-graphql
Modern Ember GraphQL integration, TypeScript and [GraphQL-Codegen](https://the-guild.dev/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](https://guides.emberjs.com/release/applications/initializers/#toc_application-initializers) in your `app/initializers` directory:
```js
// 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](#use-several-apollo-clients).
### 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:
```js
// 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:
```js
// 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:
```ts
import '@apollo/client/core';
```
## Compatibility
- Ember.js v4.12 or above
- Embroider or ember-auto-import v2
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).