Ember addon for the Apollo GraphQL Client
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
bower.json
ember-cli-build.js
index.js
package.json
testem.js

README.md

Ember-apollo

Ember integration for the awesome Apollo GraphQL Client.

Checkout the example app here.

Warning: This addon is a work in progress. It has not been tested and may not work!

Installation

  • ember install ember-apollo

You will also need to install peer dependencies

  • npm install --save-dev apollo-client graphql-tag
  • ember install ember-browserify (needed to use npm dependencies in the browser)

Setup apollo-client service

  • ember generate service apollo-client
  • import and extend the ApolloService
  • import ApolloClient
  • override initApolloClient() and return an ApolloClient instance. See Apollo docs on the ApolloClient constructor and network interfaces
// app/services/apollo-client.js
import Ember from 'ember';
import ApolloClientService from 'ember-apollo/services/apollo-client';

// this is necessary to get around some limitations of ember-browserify
import ACImports from 'npm:apollo-client';
const {default: ApolloClient, createNetworkInterface} = ACImports;

//extend ApolloClientService, not Ember.Service
export default ApolloClientService.extend({

  // override this method to setup your network interface and return an ApolloClient instance.
  initApolloClient() {
    const net = createNetworkInterface({uri: 'http://my-graphql-server/gql'});
    return new ApolloClient({networkInterface: net});
  }
});

Queries

ember-apollo is designed for you to run graphql queries in the model hook of your routes.

  • Import and extend ApolloRoute
  • Import the graphql-tag and use it to write your queries
  • Use the this.query function to execute your query in the model hook
  • ember-apollo with call ApolloClient.watchQuery under the hood and subscribe to any changes in the query results. Your model will be updated (triggering rerender) if any changes occur.
// app/routes/some-route.js
import Ember from 'ember';
import gql from 'npm:graphql-tag';
import ApolloRoute from 'ember-apollo/routes/apollo-route';

// create your query
const query = gql`
query Test
{
  allFilms {
    edges {
      node {
        title
      }
    }
  }
}
`;

// extend ApolloRoute instead of Ember.Route
export default ApolloRoute.extend({
  // the apollo-client service is injected automatically

  model() {
    const options = {}; //any options that ApolloClient.watchQuery allows
    return this.query(query, options);
  }
 });

Mutations

Mutations can be written in any action handler using the standard ApolloClient API:

\\ some-route.js
...
const mutation = gql`
  mutation {
    ... your mutation here ...
  }
`;
...
apolloClient: Ember.service.inject(),
actions: {
  someAction() {
    this.get('apolloClient').mutate({ mutation });  //returns a promise
  }
}
...

For more information on using ember-cli, visit http://ember-cli.com/.