Ember Graphql Query Component

components.query-wrapper.js

import Ember from 'ember';
import gql from 'graphql-tag'

const query = gql`
query pokedex {
  pokedex {
    pokemon(start: 0 number: 10) {edges {node {id name}}}
  }
}
`

var PromiseObject = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin)
console.log(query)
export default Ember.Component.extend({
  apollo: Ember.inject.service(),
  execQuery: Ember.on('init', function () {
    const promise = PromiseObject.create({
      promise: this.get('apollo').query({ query })
    });
    this.set('promise', promise)
  }),
  unsubQuery: Ember.on('willDestroyElement', function () {
    const model = this.get('model')
    model._apolloUnsubscribe()
  }),
  model: Ember.computed.reads('promise'),
  //isLoading: Ember.computed.reads('promise.isPending'),
  //isRejected: Ember.computed.reads('promise.isRejected'),
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Query Component Example</h1>

{{#query-wrapper as |query|}}
  {{#if query.isLoading}}
    Loading...
  {{else if query.isRejected}}
    Error...
  {{else}}
   <ul>
     {{#each query.pokedex.pokemon.edges as |edge|}}
       <li>{{edge.node.id}} {{edge.node.name}}</li>
     {{/each}}
   </ul>
  {{/if}}
{{/query-wrapper}}
{{outlet}}
<br>
<br>

templates.components.query-wrapper.hbs

{{yield (hash 
  pokedex=model.pokedex
  isLoading=isLoading
  isRejected=isRejected
)}}

twiddle.json

{
  "version": "0.12.1",
  "ENV": { 
    "apollo": {
      "apiURL": "https://pokeapi-graphiql.herokuapp.com"
    }
  },
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-apollo-client": "0.3.1"
  }
}