Uploads show up in the uploads list without needing a page refresh.

api/resolvers.js

@@ -11,21 +11,23 @@ db.defaults({uploads: []})
 
 const saveFile = file => {
   return db.get('uploads')
-    .push(file)
+    .push({
+      id: file.path,
+      ...file
+    })
     .last()
     .write()
     .then(result => result)
 }
+
 export default {
   Query: {
-    allUploads () {
+    uploads () {
       return db.get('uploads').value()
     }
   },
   Mutation: {
-    singleUpload (_, {file}) {
+    singleUpload: (_, {file}) => saveFile(file),
-      return saveFile(file)
-    },
     multipleUpload (_, {files}) {
       return Promise.all(files.map((file) => {
         return saveFile(file)

api/schema.graphql

@@ -1,4 +1,5 @@
 type File {
+  id: String!
   name: String!
   type: String!
   size: Int!
@@ -13,7 +14,7 @@ input Upload {
 }
 
 type Query {
-  allUploads: [File]
+  uploads: [File]
 }
 
 type Mutation {

app/components/multiple-uploader.js

@@ -1,5 +1,6 @@
 import {Component} from 'react'
 import {graphql, gql} from 'react-apollo'
+import uploadsQuery from '../queries/uploads'
 
 class MultipleUploader extends Component {
   handleChange = ({target}) => {
@@ -8,7 +9,10 @@ class MultipleUploader extends Component {
         .mutate({
           variables: {
             files: target.files
-          }
+          },
+          refetchQueries: [{
+            query: uploadsQuery
+          }]
         })
         .then(({data}) => console.log('Mutation response:', data))
     }
@@ -22,6 +26,7 @@ class MultipleUploader extends Component {
 export default graphql(gql`
   mutation multipleUpload ($files: [Upload!]!) {
     multipleUpload (files: $files) {
+      id
       name
       type
       size

app/components/single-uploader.js

@@ -1,5 +1,6 @@
 import {Component} from 'react'
 import {graphql, gql} from 'react-apollo'
+import uploadsQuery from '../queries/uploads'
 
 class SingleUploader extends Component {
   handleChange = ({target}) => {
@@ -8,7 +9,10 @@ class SingleUploader extends Component {
         .mutate({
           variables: {
             file: target.files[0]
-          }
+          },
+          refetchQueries: [{
+            query: uploadsQuery
+          }]
         })
         .then(({data}) => console.log('Mutation response:', data))
     }
@@ -22,6 +26,7 @@ class SingleUploader extends Component {
 export default graphql(gql`
   mutation singleUpload ($file: Upload!) {
     singleUpload (file: $file) {
+      id
       name
       type
       size

app/components/upload-list.js

@@ -1,6 +1,7 @@
-import {graphql, gql} from 'react-apollo'
+import {graphql} from 'react-apollo'
+import uploadsQuery from '../queries/uploads'
 
-const UploadList = ({data: {allUploads}}) => {
+const UploadList = ({data: {uploads}}) => {
   return (
     <table>
       <thead>
@@ -12,8 +13,8 @@ const UploadList = ({data: {allUploads}}) => {
         </tr>
       </thead>
       <tbody>
-        {allUploads.map(({name, type, size, path}) => (
+        {uploads.map(({id, name, type, size, path}) => (
-          <tr key={path}>
+          <tr key={id}>
             <td>{name}</td>
             <td>{type}</td>
             <td>{size}</td>
@@ -34,13 +35,4 @@ const UploadList = ({data: {allUploads}}) => {
   )
 }
 
-export default graphql(gql`
+export default graphql(uploadsQuery)(UploadList)
-  query allUploads {
-    allUploads {
-      name
-      type
-      size
-      path
-    }
-  }
-`)(UploadList)

app/queries/uploads.js

@@ -0,0 +1,13 @@
+import {gql} from 'react-apollo'
+
+export default gql`
+  query uploads {
+    uploads {
+      id
+      name
+      type
+      size
+      path
+    }
+  }
+`