components.capitals.js

import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';
import connect from 'ember-redux/components/connect';
import { cashay } from 'cashay';

const capitalsQuery = `
{
  missouriCapital: capital(state: MISSOURI) {
    name
    size(unit: SQ_MI)
  }
  newYorkCapital: capital(state: NEW_YORK) {
    name
    size(unit: SQ_KM)
  }
}`;

const stateToComputed = () => {
  const {
    data: { missouriCapital, newYorkCapital }
  } = cashay.query(capitalsQuery);
  
  return { missouriCapital, newYorkCapital };
};

export default connect(stateToComputed)(Ember.Component);
  

templates.components.capitals.hbs

<h1>Capitals</h1>

<div>
  <h2>Missouri</h2>
  Name: {{missouriCapital.name}}
  Size: {{missouriCapital.size}} square miles
</div>

<div>
  <h2>New York</h2>
  Name: {{newYorkCapital.name}}
  Size: {{newYorkCapital.size}} square kilometers
</div>