Chomping GraphQL API with Ember

Graphql
Solutions
Example

GraphQL -  is data query language that can be used as alternative for REST. It allows clients to define the structure of the data required, and the same structure will be returned if needed

Existing solutions

ember-graphql-adapter

ember-apollo-client

ember-graphql-adapter

ember-apollo-client

187 Stars

93 Stars

17 PR's

1 PR's

6/10 Issues

7/17 Issues

1 730/month

980/month

Better stats

ember-graphql-adapter

BUT..

DOCUMENTATION

My choice

Example

1. Addon

2. Configuration endpoint/key

3. Authentication

5. Query -> GraphQL query

6. Route customisation

Addon

ember install ember-apollo-client

Configuration

// config/environment.js

apollo: {
  apiURL: 'https://api.github.com/graphql'
},

github: {
  token: 'YOUR_GITHUBE_ACCESS_KEY'
},

Query

query issues($repo: String!, $owner: String!, $count: Int = 10) {
  repository(name: $repo, owner: $owner) {
    issues(first:$count) {
      edges {
        node {
          title
        }
      }
    }
  }
}

Authentication

// app/services/apollo.js

export default ApolloService.extend({
  middlewares: middlewares("authorize"),

  authorize(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};
    }

    req.options.headers['Authorization'] = `token ${ENV['github'].token}`;
    next();
  }
});

// app/routes/issues.js

import query from "graphql-test/gql/queries/issues";
import RouteQueryManager from "ember-apollo-client/mixins/route-query-manager";

export default Route.extend(RouteQueryManager, {
  model() {
    const variables = {
      repo: 'elixir',
      owner: 'elixir-lang',
      count: 100
    };

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

Route

mutations
Fragments

THanks!

Michał Staśkiewicz

@staskiewiczmiko