https://github.com/josemarluedke/glimmer-apollo

Ember and Glimmer integration for Apollo Client.
https://github.com/josemarluedke/glimmer-apollo

apollo-client apollographql ember ember-addon emberjs glimmer graphql hacktoberfest

Last synced: 7 days ago
JSON representation

Ember and Glimmer integration for Apollo Client.

• Host: GitHub
• URL: https://github.com/josemarluedke/glimmer-apollo
• Owner: josemarluedke
• License: mit
• Created: 2021-03-18T01:03:01.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-04T16:00:22.000Z (3 months ago)
• Last Synced: 2024-12-30T00:12:22.556Z (14 days ago)
• Topics: apollo-client, apollographql, ember, ember-addon, emberjs, glimmer, graphql, hacktoberfest
• Language: TypeScript
• Homepage: https://glimmer-apollo.com
• Size: 2.2 MB
• Stars: 39
• Watchers: 3
• Forks: 15
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        




  

  



Glimmer Apollo: Ember and Glimmer integration for Apollo Client.

## Documentation

Visit [glimmer-apollo.com](https://glimmer-apollo.com/) to read the docs.

## Compatibility

- Apollo Client v3.0 or above

- GlimmerX v0.6 or above

- Node.js v12 or above

- FastBoot 1.0+

## Ember Requirements

- Embroider or ember-auto-import v2.

- Ember.js v3.27 or above

- Ember CLI v2.13 or above

## API

### useQuery(ctx, args)

```js

import Component, { hbs, tracked } from '@glimmerx/component';

import { on, action } from '@glimmerx/modifier';

import { useQuery, gql } from 'glimmer-apollo';

import Todo from './todo';

export default class Todos extends Component {

  @tracked isDone = false;

  todos = useQuery(this, () => [

    gql`

      query($isDone: Boolean) {

        todos(isDone: $isDone) {

          id

          description

        }

      }

    `,

    {

      variables: { isDone: this.isDone }

    }

  ]);

  @action toggleDone() {

    this.isDone = !this.isDone;

  }

  static template = hbs`

    Toggle completed todos

    {{#if this.todos.loading}}

      Loading...

    {{/if}}

    {{#each this.todos.data as |todo|}}

      

    {{/each}}

  `;

}

```

### useMutation(ctx, args)

```js

import Component, { hbs } from '@glimmerx/component';

import { on } from '@glimmerx/modifier';

import { useMutation, gql } from 'glimmer-apollo';

export default class Todo extends Component {

  deleteTodo = useMutation(this, () => [

    gql`

      mutation($id: ID!) {

        deleteTodo(id: $id) {

          id

        }

      }

    `,

    { variables: { id: this.args.todo.id } }

  ]);

  static template = hbs`

    


      {{@todo.description}}

      

        {{#if this.deleteTodo.loading}}

          Deleting...

        {{else}}

          Delete

        {{/if}}

      

    

  `;

}

```


### useSubscription(ctx, args)

```js

import Component, { hbs, tracked } from '@glimmerx/component';

import { on } from '@glimmerx/modifier';

import { useSubscription, gql } from 'glimmer-apollo';

export default class Messages extends Component {

  @tracked receivedMessages = [];

  messageAdded = useSubscription(this, () => [

    gql`

      subscription ($channel: String!) {

        messageAdded(channel: $channel) {

          id

          message

        }

      }

    `,

    {

      variables: { channel: this.args.channel },

      onData: (data) => {

        this.receivedMessages = [

          ...this.receivedMessages,

          data.messageAdded

        ]

      }

    }

  ]);

  static template = hbs`

    


      {{#if this.messageAdded.loading}}

        Connecting...

      {{/if}}


      {{#each this.receivedMessages as |item|}}

        {{item.message}}

      {{/each}}

    

  `;

}

```


### setClient(ctx, client[, clientId])

Where `ctx` is an object with owner.

```js

import { setClient } from 'glimmer-apollo';

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

class App extends Component {

  constructor() {

    super(...arguments);

    setClient(this, new ApolloClient({ ... });

  }

  // ...

}

```

### getClient(ctx[,clientId])

Where `ctx` is an object with owner.

```js

import { getClient } from 'glimmer-apollo';

class MyComponent extends Component {

  constructor() {

    super(...arguments);

    const client = getClient(this);

  }

  // ...

}

```

## License

This project is licensed under the MIT License.