How to use ember-apollo-client - 9 common examples

import ApolloService from 'ember-apollo-client/services/apollo';

export default ApolloService.extend({
  init() {
    this._super(...arguments);
    this.get('client').networkInterface.use([{
      applyMiddleware: (req, next) => this._runAuthorize(req, next)
    }]);
  },

  _runAuthorize(req, next) {
    if (!req.options.headers) {
      req.options.headers = {}; // Create the headers object if needed.
    }
    req.options.headers['X-Shopify-Storefront-Access-Token']= 'dd4d4dc146542ba7763305d71d1b3d38';
    next();
  }
});

import Route from '@ember/routing/route';
import { queryManager } from 'ember-apollo-client';
import query from 'dummy/gql/queries/human';

const variables = { id: '1000' };

export default Route.extend({
  apollo: queryManager(),

  model() {
    return this.apollo.watchQuery(
      {
        query,
        variables,
        fetchPolicy: 'cache-and-network',
      },
      'human'
    );
  },

  actions: {
    refetchModel() {
      this.apollo.query({
        query,

import Route from '@ember/routing/route';
import { queryManager, getObservable } from 'ember-apollo-client';
import query from 'dummy/gql/queries/movie';
import mutation from 'dummy/gql/mutations/change-movie-title';

export default Route.extend({
  apollo: queryManager(),

  model({ id }) {
    return this.apollo.watchQuery({
      query,
      variables: {
        id,
      },
    });
  },

  actions: {
    refetchData(id) {
      this.apollo.query({
        query,
        variables: { id },
        fetchPolicy: 'network-only',

import Route from '@ember/routing/route';
import { queryManager, getObservable } from 'ember-apollo-client';
import query from 'dummy/gql/queries/movies';

export default Route.extend({
  apollo: queryManager(),

  queryParams: {
    topRated: {
      refreshModel: true,
    },
  },

  model({ topRated }) {
    return this.apollo.watchQuery({
      query,
      variables: {
        topRated,
      },
    });
  },

refetchUsingObservable(model) {
      const observable = getObservable(model);
      observable.refetch();
    },

refetchData(model) {
      const observable = getObservable(model);
      observable.refetch();
    },
  },

init() {
    super.init(...arguments);

    let options = this.clientOptions;
    if (typeof options === 'function') {
      options = this.clientOptions();
    } else {
      deprecateComputed('clientOptions');
    }

    this.client = new ApolloClient(options);

    if (Ember.testing) {
      this._registerWaiter();
    }
  }

clientOptions() {
    let { link, cache } = this;

    if (typeof link === 'function') {
      link = this.link();
    } else {
      deprecateComputed('link');
    }

    if (typeof cache === 'function') {
      cache = this.cache();
    } else {
      deprecateComputed('cache');
    }

    return { link, cache };
  }

clientOptions() {
    let { link, cache } = this;

    if (typeof link === 'function') {
      link = this.link();
    } else {
      deprecateComputed('link');
    }

    if (typeof cache === 'function') {
      cache = this.cache();
    } else {
      deprecateComputed('cache');
    }

    return { link, cache };
  }