Glimmer Apollo: Ember and Glimmer integration for Apollo Client.

Documentation

Visit 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)

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`
    <button {{on "click" this.toggleDone}}>Toggle completed todos</button>

    {{#if this.todos.loading}}
      Loading...
    {{/if}}

    {{#each this.todos.data as |todo|}}
      <Todo @todo={{todo}} />
    {{/each}}
  `;
}

useMutation(ctx, args)

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`
    <div>
      {{@todo.description}}
      <button
        {{on "click" this.deleteTodo.mutate}}
        disabled={{this.deleteTodo.loading}}
      >
        {{#if this.deleteTodo.loading}}
          Deleting...
        {{else}}
          Delete
        {{/if}}
      </button>
    </div>
  `;
}

useSubscription(ctx, args)

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`
    <div>
      {{#if this.messageAdded.loading}}
        Connecting...
      {{/if}}

      {{#each this.receivedMessages as |item|}}
        {{item.message}}
      {{/each}}
    </div>
  `;
}

setClient(ctx, client[, clientId])

Where ctx is an object with owner.

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.

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.