diff --git a/app/components/multiple-uploader.js b/app/components/multiple-uploader.js index 8426046..19ab921 100644 --- a/app/components/multiple-uploader.js +++ b/app/components/multiple-uploader.js @@ -1,26 +1,28 @@ -import {graphql, gql} from 'react-apollo' +import { graphql, gql } from 'react-apollo' import uploadsQuery from '../queries/uploads' -const MultipleUploader = ({mutate}) => { - const handleChange = ({target}) => { +const MultipleUploader = ({ mutate }) => { + const handleChange = ({ target }) => { if (target.validity.valid) { mutate({ variables: { files: target.files }, - refetchQueries: [{ - query: uploadsQuery - }] + refetchQueries: [ + { + query: uploadsQuery + } + ] }) } } - return + return } export default graphql(gql` - mutation multipleUpload ($files: [Upload!]!) { - multipleUpload (files: $files) { + mutation multipleUpload($files: [Upload!]!) { + multipleUpload(files: $files) { id name type diff --git a/app/components/section.js b/app/components/section.js index 7fc4e1c..9d61dcb 100644 --- a/app/components/section.js +++ b/app/components/section.js @@ -1,6 +1,8 @@ -export default ({heading, children}) => ( +const Section = ({ heading, children }) =>
-

{heading}

+

+ {heading} +

{children}
-) + +export default Section diff --git a/app/components/single-uploader.js b/app/components/single-uploader.js index 1c52628..8194571 100644 --- a/app/components/single-uploader.js +++ b/app/components/single-uploader.js @@ -1,26 +1,28 @@ -import {graphql, gql} from 'react-apollo' +import { graphql, gql } from 'react-apollo' import uploadsQuery from '../queries/uploads' -const SingleUploader = ({mutate}) => { - const handleChange = ({target}) => { +const SingleUploader = ({ mutate }) => { + const handleChange = ({ target }) => { if (target.validity.valid) { mutate({ variables: { file: target.files[0] }, - refetchQueries: [{ - query: uploadsQuery - }] + refetchQueries: [ + { + query: uploadsQuery + } + ] }) } } - return + return } export default graphql(gql` - mutation singleUpload ($file: Upload!) { - singleUpload (file: $file) { + mutation singleUpload($file: Upload!) { + singleUpload(file: $file) { id name type diff --git a/app/components/upload-list.js b/app/components/upload-list.js index ac9aba2..a13b5ff 100644 --- a/app/components/upload-list.js +++ b/app/components/upload-list.js @@ -1,7 +1,7 @@ -import {graphql} from 'react-apollo' +import { graphql } from 'react-apollo' import uploadsQuery from '../queries/uploads' -const UploadList = ({data: {uploads}}) => { +const UploadList = ({ data: { uploads } }) => { return (
@@ -14,14 +14,22 @@ const UploadList = ({data: {uploads}}) => { - {uploads.map(({id, name, type, size, path}) => ( + {uploads.map(({ id, name, type, size, path }) => - - - - + + + + - ))} + )}
{name}{type}{size}{path} + {name} + + {type} + + {size} + + {path} +
+ html { + font-family: sans-serif; + } + body { + margin: 2em; + } + `}

Apollo upload examples

-
+

Select an file to upload and view the response in the console.

-
-

Select multiple files to upload and view the response in the console.

+
+

+ Select multiple files to upload and view the response in the console. +

-
+
-)) + +export default withData(HomePage) diff --git a/app/queries/uploads.js b/app/queries/uploads.js index 7f26067..b6f675d 100644 --- a/app/queries/uploads.js +++ b/app/queries/uploads.js @@ -1,4 +1,4 @@ -import {gql} from 'react-apollo' +import { gql } from 'react-apollo' export default gql` query uploads {