josemarluedke / glimmer-apollo

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}}
  `;
}

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>
  `;
}

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>
  `;
}

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

class App extends Component {
  constructor() {
    super(...arguments);

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

  // ...
}

import { getClient } from 'glimmer-apollo';

class MyComponent extends Component {
  constructor() {
    super(...arguments);

    const client = getClient(this);
  }

  // ...
}