optimistic result, cache update

frontend/src/components/Start.vue

@@ -2,6 +2,7 @@
   <div id="start">
     <a href="#">start a lunch run</a>
 
+    <div v-if="$apollo.queries.runs.loading">Loading...</div>
     <ul>
       <li v-for="run in runs" :key="run.id">
         {{ run.name }}
@@ -13,6 +14,7 @@
       <input type='text' name='name' id='name' v-model='name'/>
       <input type='submit' value='Add Run'/>
     </form>
+
   </div>
 </template>
 
@@ -23,7 +25,8 @@ export default {
   name: 'Start',
   data () {
     return {
-      name: ''
+      name: '',
+      runs: []
     }
   },
   methods: {
@@ -33,6 +36,19 @@ export default {
         mutation: createRun,
         variables: {
           name: name
+        },
+        update: (store, { data: { createRun } }) => {
+          const data = store.readQuery({ query: listRuns })
+          data.listRuns.items.push(createRun)
+          store.writeQuery({ query: listRuns, data })
+        },
+        optimisticResponse: {
+          __typename: 'Mutation',
+          createRun: {
+            __typename: 'Run',
+            id: -1,
+            name: name
+          }
         }
       }).then((data) => {
         console.log(data)