jos3duardo/upload-apollo-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch from react-apollo to @apollo/react-hooks.

Browse Source
This commit is contained in:
Jayden Seric 2019-10-09 18:58:43 +11:00
parent f89959fec8
commit 7ffa0546be
9 changed files with 120 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
app/components/UploadBlob.js
View File

@ -1,79 +1,55 @@
import { useApolloClient, useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { Component } from 'react' import React from 'react'
import { graphql } from 'react-apollo'
import uploadsQuery from '../queries/uploads'
import Field from './Field' import Field from './Field'
class UploadBlob extends Component { const SINGLE_UPLOAD_MUTATION = gql`
state = { mutation singleUpload($file: Upload!) {
name: '', singleUpload(file: $file) {
content: '' id
}
} }
`
handleChange = ({ target: { name, value } }) => export const UploadBlob = () => {
this.setState({ [name]: value }) const [name, setName] = React.useState('')
const [content, setContent] = React.useState('')
const [singleUploadMutation] = useMutation(SINGLE_UPLOAD_MUTATION)
const apolloClient = useApolloClient()
handleSubmit = event => { const onNameChange = ({ target: { value } }) => setName(value)
const onContentChange = ({ target: { value } }) => setContent(value)
const onSubmit = event => {
event.preventDefault() event.preventDefault()
const file = new Blob([this.state.content], { type: 'text/plain' }) const file = new Blob([content], { type: 'text/plain' })
file.name = `${this.state.name}.txt` file.name = `${name}.txt`
this.props.mutate({ singleUploadMutation({ variables: { file } }).then(() => {
variables: { file }, apolloClient.resetStore()
update(
proxy,
{
data: { singleUpload }
}
) {
const data = proxy.readQuery({ query: uploadsQuery })
proxy.writeQuery({
query: uploadsQuery,
data: {
...data,
uploads: [...data.uploads, singleUpload]
}
})
}
}) })
} }
render() { return (
return ( <form onSubmit={onSubmit}>
<form onSubmit={this.handleSubmit}> <Field>
<Field> <input
<input placeholder="Name"
name="name" required
placeholder="Name" value={name}
required onChange={onNameChange}
value={this.state.name} />{' '}
onChange={this.handleChange} .txt
/>{' '} </Field>
.txt <Field>
</Field> <textarea
<Field> placeholder="Content"
<textarea required
name="content" value={content}
placeholder="Content" onChange={onContentChange}
required />
value={this.state.content} </Field>
onChange={this.handleChange} <button>Upload</button>
/> </form>
</Field> )
<button>Upload</button>
</form>
)
}
} }
export default graphql(gql`
mutation($file: Upload!) {
singleUpload(file: $file) {
id
filename
mimetype
path
}
}
`)(UploadBlob)

50
app/components/UploadFile.js
View File

@ -1,44 +1,28 @@
import { useApolloClient, useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { graphql } from 'react-apollo'
import uploadsQuery from '../queries/uploads'
const UploadFile = ({ mutate }) => { const SINGLE_UPLOAD_MUTATION = gql`
const handleChange = ({ mutation($file: Upload!) {
singleUpload(file: $file) {
id
}
}
`
export const UploadFile = () => {
const [uploadFileMutation] = useMutation(SINGLE_UPLOAD_MUTATION)
const apolloClient = useApolloClient()
const onChange = ({
target: { target: {
validity, validity,
files: [file] files: [file]
} }
}) => }) =>
validity.valid && validity.valid &&
mutate({ uploadFileMutation({ variables: { file } }).then(() => {
variables: { file }, apolloClient.resetStore()
update(
proxy,
{
data: { singleUpload }
}
) {
const data = proxy.readQuery({ query: uploadsQuery })
proxy.writeQuery({
query: uploadsQuery,
data: {
...data,
uploads: [...data.uploads, singleUpload]
}
})
}
}) })
return <input type="file" required onChange={handleChange} /> return <input type="file" required onChange={onChange} />
} }
export default graphql(gql`
mutation($file: Upload!) {
singleUpload(file: $file) {
id
filename
mimetype
path
}
}
`)(UploadFile)

50
app/components/UploadFileList.js
View File

@ -1,39 +1,23 @@
import { useApolloClient, useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { graphql } from 'react-apollo'
import uploadsQuery from '../queries/uploads'
const UploadFileList = ({ mutate }) => { const MULTIPLE_UPLOAD_MUTATION = gql`
const handleChange = ({ target: { validity, files } }) => mutation multipleUpload($files: [Upload!]!) {
validity.valid &&
mutate({
variables: { files },
update(
proxy,
{
data: { multipleUpload }
}
) {
const data = proxy.readQuery({ query: uploadsQuery })
proxy.writeQuery({
query: uploadsQuery,
data: {
...data,
uploads: [...data.uploads, ...multipleUpload]
}
})
}
})
return <input type="file" multiple required onChange={handleChange} />
}
export default graphql(gql`
mutation($files: [Upload!]!) {
multipleUpload(files: $files) { multipleUpload(files: $files) {
id id
filename
mimetype
path
} }
} }
`)(UploadFileList) `
export const UploadFileList = () => {
const [multipleUploadMutation] = useMutation(MULTIPLE_UPLOAD_MUTATION)
const apolloClient = useApolloClient()
const onChange = ({ target: { validity, files } }) =>
validity.valid &&
multipleUploadMutation({ variables: { files } }).then(() => {
apolloClient.resetStore()
})
return <input type="file" multiple required onChange={onChange} />
}

53
app/components/Uploads.js
View File

@ -1,24 +1,37 @@
import { graphql } from 'react-apollo' import { useQuery } from '@apollo/react-hooks'
import uploadsQuery from '../queries/uploads' import gql from 'graphql-tag'
import { Cell, Head, Table } from './Table' import { Cell, Head, Table } from './Table'
const Uploads = ({ data: { uploads = [] } }) => ( const UPLOADS_QUERY = gql`
<Table query uploads {
thead={ uploads {
<tr> id
<Head>Filename</Head> filename
<Head>MIME type</Head> mimetype
<Head>Path</Head> path
</tr>
} }
tbody={uploads.map(({ id, filename, mimetype, path }) => ( }
<tr key={id}> `
<Cell>{filename}</Cell>
<Cell>{mimetype}</Cell>
<Cell>{path}</Cell>
</tr>
))}
/>
)
export default graphql(uploadsQuery)(Uploads) export const Uploads = () => {
const { data: { uploads = [] } = {} } = useQuery(UPLOADS_QUERY)
return (
<Table
thead={
<tr>
<Head>Filename</Head>
<Head>MIME type</Head>
<Head>Path</Head>
</tr>
}
tbody={uploads.map(({ id, filename, mimetype, path }) => (
<tr key={id}>
<Cell>{filename}</Cell>
<Cell>{mimetype}</Cell>
<Cell>{path}</Cell>
</tr>
))}
/>
)
}

50
app/package-lock.json generated
View File

@ -40,30 +40,6 @@
"tslib": "^1.10.0" "tslib": "^1.10.0"
} }
}, },
"@apollo/react-components": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@apollo/react-components/-/react-components-3.1.2.tgz",
"integrity": "sha512-D1habJ8IvylC8KpgzlM6yYskYGcTYuyOU5cPgtluamTc4ro6P/98bILMO4qHDDj0zkBARIgHrf2QV6oityTfvA==",
"requires": {
"@apollo/react-common": "^3.1.2",
"@apollo/react-hooks": "^3.1.2",
"prop-types": "^15.7.2",
"ts-invariant": "^0.4.4",
"tslib": "^1.10.0"
}
},
"@apollo/react-hoc": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@apollo/react-hoc/-/react-hoc-3.1.2.tgz",
"integrity": "sha512-VbykBrxPBurt/yIAK8oFg7ZHL5ls2QI1y93AtLqJNwe4oM0m3oJC2jGIr2jobSVhbmGdzIGWshKJTbtrRowQ3g==",
"requires": {
"@apollo/react-common": "^3.1.2",
"@apollo/react-components": "^3.1.2",
"hoist-non-react-statics": "^3.3.0",
"ts-invariant": "^0.4.4",
"tslib": "^1.10.0"
}
},
"@apollo/react-hooks": { "@apollo/react-hooks": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/@apollo/react-hooks/-/react-hooks-3.1.2.tgz", "resolved": "https://registry.npmjs.org/@apollo/react-hooks/-/react-hooks-3.1.2.tgz",
@ -2722,9 +2698,9 @@
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
}, },
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.3.277", "version": "1.3.278",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.277.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.278.tgz",
"integrity": "sha512-Czmsrgng89DOgJlIknnw9bn5431QdtnUwGp5YYiPwU1DbZQUxCLF+rc1ZC09VNAdalOPcvH6AE8BaA0H5HjI/w==" "integrity": "sha512-4cPkOCY5k4z69MHOA96VUt+Wl24AbLHQcm7W9ckabJ/iRe7oBFNMiliw75lK/w++R9bKCUxJ0mFnMRMylnAlbA=="
}, },
"elliptic": { "elliptic": {
"version": "6.5.1", "version": "6.5.1",
@ -4342,14 +4318,6 @@
"minimalistic-crypto-utils": "^1.0.1" "minimalistic-crypto-utils": "^1.0.1"
} }
}, },
"hoist-non-react-statics": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
"integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
"requires": {
"react-is": "^16.7.0"
}
},
"hosted-git-info": { "hosted-git-info": {
"version": "2.8.5", "version": "2.8.5",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
@ -6570,18 +6538,6 @@
"prop-types": "^15.6.2" "prop-types": "^15.6.2"
} }
}, },
"react-apollo": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-3.1.2.tgz",
"integrity": "sha512-9MhirrglRY5wxPIhqfFcYnglDMmqSz++Ih3VS01mSz86GctHdcajLKDR/pXR2hrCZzlS9tTjpxGNw6yWn5ykxw==",
"requires": {
"@apollo/react-common": "^3.1.2",
"@apollo/react-components": "^3.1.2",
"@apollo/react-hoc": "^3.1.2",
"@apollo/react-hooks": "^3.1.2",
"@apollo/react-ssr": "^3.1.2"
}
},
"react-dom": { "react-dom": {
"version": "16.10.2", "version": "16.10.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.10.2.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.10.2.tgz",

4
app/package.json
View File

@ -12,9 +12,10 @@
}, },
"browserslist": "> 0.5%, not dead, node >= 8.6", "browserslist": "> 0.5%, not dead, node >= 8.6",
"dependencies": { "dependencies": {
"@apollo/react-hooks": "^3.1.2",
"@apollo/react-ssr": "^3.1.2",
"apollo-cache-inmemory": "^1.6.3", "apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4", "apollo-client": "^2.6.4",
"apollo-link": "^1.2.13",
"apollo-upload-client": "^11.0.0", "apollo-upload-client": "^11.0.0",
"babel-plugin-graphql-tag": "^2.5.0", "babel-plugin-graphql-tag": "^2.5.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.3", "babel-plugin-transform-inline-environment-variables": "^0.4.3",
@ -24,7 +25,6 @@
"graphql-tag": "^2.10.1", "graphql-tag": "^2.10.1",
"next": "^9.1.1", "next": "^9.1.1",
"react": "^16.10.2", "react": "^16.10.2",
"react-apollo": "^3.1.2",
"react-dom": "^16.10.2" "react-dom": "^16.10.2"
}, },
"devDependencies": { "devDependencies": {

3
app/pages/_app.js
View File

@ -1,10 +1,10 @@
import 'cross-fetch/polyfill' import 'cross-fetch/polyfill'
import { ApolloProvider } from '@apollo/react-hooks'
import { InMemoryCache } from 'apollo-cache-inmemory' import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client' import { ApolloClient } from 'apollo-client'
import { createUploadLink } from 'apollo-upload-client' import { createUploadLink } from 'apollo-upload-client'
import App from 'next/app' import App from 'next/app'
import Head from 'next/head' import Head from 'next/head'
import { ApolloProvider, getDataFromTree } from 'react-apollo'
const createApolloClient = (cache = {}) => const createApolloClient = (cache = {}) =>
new ApolloClient({ new ApolloClient({
@ -23,6 +23,7 @@ export default class CustomApp extends App {
if (ctx.req) { if (ctx.req) {
const apolloClient = createApolloClient() const apolloClient = createApolloClient()
try { try {
const { getDataFromTree } = await import('@apollo/react-ssr')
await getDataFromTree( await getDataFromTree(
<CustomApp <CustomApp
{...props} {...props}

8
app/pages/index.js
View File

@ -1,9 +1,9 @@
import Page from '../components/Page' import Page from '../components/Page'
import Section from '../components/Section' import Section from '../components/Section'
import UploadBlob from '../components/UploadBlob' import { UploadBlob } from '../components/UploadBlob'
import UploadFile from '../components/UploadFile' import { UploadFile } from '../components/UploadFile'
import UploadFileList from '../components/UploadFileList' import { UploadFileList } from '../components/UploadFileList'
import Uploads from '../components/Uploads' import { Uploads } from '../components/Uploads'
const IndexPage = () => ( const IndexPage = () => (
<Page title="Apollo upload examples"> <Page title="Apollo upload examples">

12
app/queries/uploads.js
View File

@ -1,12 +0,0 @@
import gql from 'graphql-tag'
export default gql`
query uploads {
uploads {
id
filename
mimetype
path
}
}
`