handle mutation that returns an array

addon/mocks/mutation.js

@@ -1,4 +1,5 @@
 import { contextSet, isFunction, reduceKeys, unwrapNonNull } from '../utils';
+import { GraphQLList } from 'graphql';
 import { getRecords } from '../db';
 import { resolveArgName } from '../fields/args';
 
@@ -13,6 +14,10 @@ export const composeMockMutation = (getRecords, mapArgs) =>
   (db, options = {}, _, args, __, { fieldName, returnType }) => {
     returnType = unwrapNonNull(returnType);
 
+    if (returnType instanceof GraphQLList) {
+      returnType = returnType.ofType
+    }
+
     let { mutations = {}, argsMap = {} } = options;
     let mutation = mutations[fieldName];
     let records = getRecords(db, returnType.name);

tests/acceptance/new-person-test.js

@@ -0,0 +1,32 @@
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import { click, fillIn, visit } from '@ember/test-helpers';
+
+module('Acceptance | new person', function(hooks) {
+  setupApplicationTest(hooks);
+
+  test('it can create a person via mutation and handles an array response', async function(assert) {
+    let newFirstName = 'Dave';
+    let newLastName = 'Jones';
+    let newAge = 44;
+
+    assert.ok(this.server.db.people.length === 0)
+
+    await visit(`/person-new`);
+
+
+    let firstNameInput = this.element.querySelector('#person-first-name');
+    let lastNameInput = this.element.querySelector('#person-last-name');
+    let ageInput = this.element.querySelector('#person-age');
+
+    await fillIn(firstNameInput, newFirstName);
+    await fillIn(lastNameInput, newLastName);
+    await fillIn(ageInput, newAge);
+    await click('.person-save');
+
+    let lastName = this.element.querySelector('.person-last-name');
+
+    assert.equal(lastName.textContent, newLastName, 'a person with with the correct last name was created');
+    assert.ok(this.server.db.people.length === 1, 'a new person was persisted to the DB')
+  });
+})

tests/dummy/app/controllers/person-new.js

@@ -0,0 +1,36 @@
+import Controller from '@ember/controller';
+import mutation from 'dummy/gql/mutations/create-person';
+import { contextSet } from 'ember-cli-mirage-graphql/utils';
+import { inject as service } from '@ember/service';
+
+function getAttrsFromForm(form) {
+  let inputNodes = [ ...form.querySelectorAll('input') ];
+
+  return inputNodes.reduce((attrs, { name, value }) =>
+    contextSet(attrs, name, value), {});
+}
+
+export default Controller.extend({
+  apollo: service(),
+  lastName: '',
+  firstName: '',
+  age: null,
+
+  actions: {
+    async savePerson(e) {
+      e.preventDefault();
+
+      let attrs = getAttrsFromForm(e.target)
+      attrs.age = Number(attrs.age)
+
+      let { createPerson } = await this.get('apollo').mutate({
+        mutation,
+        variables: {
+          personAttributes: attrs
+        }
+      });
+
+      this.transitionToRoute('person', createPerson[0].id);
+    }
+  }
+});

tests/dummy/app/gql/mutations/create-person.graphql

@@ -0,0 +1,8 @@
+mutation CreatePerson($personAttributes: PersonAttributes!) {
+  createPerson(personAttributes: $personAttributes) {
+    id
+    firstName
+    lastName
+    age
+  }
+}

tests/dummy/app/gql/schema.graphql

@@ -32,6 +32,8 @@ type LineItemEdge {
 
 type Mutation {
   updatePerson(id: ID!, personAttributes: PersonAttributes!): Person!
+
+  createPerson(personAttributes: PersonAttributes!): [Person]
 }
 
 interface Node {

tests/dummy/app/router.js

@@ -16,6 +16,7 @@ Router.map(function() {
   this.route('person', { path: '/person/:person_id' }, function() {
     this.route('edit');
   });
+  this.route('person-new');
   this.route('pets-and-people');
 });
 

tests/dummy/app/templates/person-new.hbs

@@ -0,0 +1,24 @@
+<form onsubmit={{action "savePerson"}}>
+  <div>
+    <label for="person-first-name">First Name:</label>
+    {{input id="person-first-name"
+            name="firstName"
+            value=firstName
+            class="person-last-name"}}
+  </div>
+  <div>
+    <label for="person-last-name">Last Name:</label>
+    {{input id="person-last-name"
+            name="lastName"
+            value=lastName
+            class="person-last-name"}}
+  </div>
+  <div>
+    <label for="person-age">Age:</label>
+    {{input id="person-age"
+            name="age"
+            value=age
+            class="person-last-name"}}
+  </div>
+  <button type="submit" class="person-save">Save</button>
+</form>

tests/dummy/mirage/handlers/graphql.js

@@ -44,7 +44,9 @@ const OPTIONS = {
     updatePerson: (people, { id, personAttributes }) =>
       adaptPersonAttrsFrom(
         people.update(id, adaptPersonAttrsTo(personAttributes))
-      )
+      ),
+    createPerson: (people, { personAttributes }) => [people.insert(adaptPersonAttrsTo(personAttributes))]
+
   },
   argsMap: {
     Person: {