From 3b11a922f6d9c8bd40ab230e0e2d22e14f9226ef Mon Sep 17 00:00:00 2001
From: Jayden Seric <me@jaydenseric.com>
Date: Sun, 9 Apr 2017 14:56:04 +1000
Subject: [PATCH] Uploads show up in the uploads list without needing a page
 refresh.

---
 api/resolvers.js                    | 12 +++++++-----
 api/schema.graphql                  |  3 ++-
 app/components/multiple-uploader.js |  7 ++++++-
 app/components/single-uploader.js   |  7 ++++++-
 app/components/upload-list.js       | 20 ++++++--------------
 app/queries/uploads.js              | 13 +++++++++++++
 6 files changed, 40 insertions(+), 22 deletions(-)
 create mode 100644 app/queries/uploads.js

diff --git a/api/resolvers.js b/api/resolvers.js
index 5cafcb1..7512583 100644
--- a/api/resolvers.js
+++ b/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}) {
-      return saveFile(file)
-    },
+    singleUpload: (_, {file}) => saveFile(file),
     multipleUpload (_, {files}) {
       return Promise.all(files.map((file) => {
         return saveFile(file)
diff --git a/api/schema.graphql b/api/schema.graphql
index 1ecf5e6..0c2cadb 100644
--- a/api/schema.graphql
+++ b/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 {
diff --git a/app/components/multiple-uploader.js b/app/components/multiple-uploader.js
index dfaed22..dd54fef 100644
--- a/app/components/multiple-uploader.js
+++ b/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
diff --git a/app/components/single-uploader.js b/app/components/single-uploader.js
index 0611ad3..0b5e5b1 100644
--- a/app/components/single-uploader.js
+++ b/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
diff --git a/app/components/upload-list.js b/app/components/upload-list.js
index 80e4dd8..b065007 100644
--- a/app/components/upload-list.js
+++ b/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}) => (
-          <tr key={path}>
+        {uploads.map(({id, name, type, size, 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`
-  query allUploads {
-    allUploads {
-      name
-      type
-      size
-      path
-    }
-  }
-`)(UploadList)
+export default graphql(uploadsQuery)(UploadList)
diff --git a/app/queries/uploads.js b/app/queries/uploads.js
new file mode 100644
index 0000000..7f26067
--- /dev/null
+++ b/app/queries/uploads.js
@@ -0,0 +1,13 @@
+import {gql} from 'react-apollo'
+
+export default gql`
+  query uploads {
+    uploads {
+      id
+      name
+      type
+      size
+      path
+    }
+  }
+`