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: 3 days 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 (7 months ago)
• Default Branch: main
• Last Pushed: 2024-05-07T12:45:11.000Z (5 months ago)
• Last Synced: 2024-09-25T20:21:04.910Z (8 days 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).