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 { Component } from 'react'
import { graphql } from 'react-apollo'
import uploadsQuery from '../queries/uploads'
import React from 'react'
import Field from './Field'
class UploadBlob extends Component {
state = {
name: '',
content: ''
const SINGLE_UPLOAD_MUTATION = gql`
mutation singleUpload($file: Upload!) {
singleUpload(file: $file) {
id
}
}
`
handleChange = ({ target: { name, value } }) =>
this.setState({ [name]: value })
export const UploadBlob = () => {
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()
const file = new Blob([this.state.content], { type: 'text/plain' })
file.name = `${this.state.name}.txt`
const file = new Blob([content], { type: 'text/plain' })
file.name = `${name}.txt`
this.props.mutate({
variables: { file },
update(
proxy,
{
data: { singleUpload }
}
) {
const data = proxy.readQuery({ query: uploadsQuery })
proxy.writeQuery({
query: uploadsQuery,
data: {
...data,
uploads: [...data.uploads, singleUpload]
}
})
}
singleUploadMutation({ variables: { file } }).then(() => {
apolloClient.resetStore()
})
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<Field>
<input
name="name"
placeholder="Name"
required
value={this.state.name}
onChange={this.handleChange}
/>{' '}
.txt
</Field>
<Field>
<textarea
name="content"
placeholder="Content"
required
value={this.state.content}
onChange={this.handleChange}
/>
</Field>
<button>Upload</button>
</form>
)
}
return (
<form onSubmit={onSubmit}>
<Field>
<input
placeholder="Name"
required
value={name}
onChange={onNameChange}
/>{' '}
.txt
</Field>
<Field>
<textarea
placeholder="Content"
required
value={content}
onChange={onContentChange}
/>
</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 { graphql } from 'react-apollo'
import uploadsQuery from '../queries/uploads'
const UploadFile = ({ mutate }) => {
const handleChange = ({
const SINGLE_UPLOAD_MUTATION = gql`
mutation($file: Upload!) {
singleUpload(file: $file) {
id
}
}
`
export const UploadFile = () => {
const [uploadFileMutation] = useMutation(SINGLE_UPLOAD_MUTATION)
const apolloClient = useApolloClient()
const onChange = ({
target: {
validity,
files: [file]
}
}) =>
validity.valid &&
mutate({
variables: { file },
update(
proxy,
{
data: { singleUpload }
}
) {
const data = proxy.readQuery({ query: uploadsQuery })
proxy.writeQuery({
query: uploadsQuery,
data: {
...data,
uploads: [...data.uploads, singleUpload]
}
})
}
uploadFileMutation({ variables: { file } }).then(() => {
apolloClient.resetStore()
})
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 { graphql } from 'react-apollo'
import uploadsQuery from '../queries/uploads'
const UploadFileList = ({ mutate }) => {
const handleChange = ({ target: { validity, files } }) =>
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!]!) {
const MULTIPLE_UPLOAD_MUTATION = gql`
mutation multipleUpload($files: [Upload!]!) {
multipleUpload(files: $files) {
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 uploadsQuery from '../queries/uploads'
import { useQuery } from '@apollo/react-hooks'
import gql from 'graphql-tag'
import { Cell, Head, Table } from './Table'
const Uploads = ({ data: { uploads = [] } }) => (
<Table
thead={
<tr>
<Head>Filename</Head>
<Head>MIME type</Head>
<Head>Path</Head>
</tr>
const UPLOADS_QUERY = gql`
query uploads {
uploads {
id
filename
mimetype
path
}
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"
}
},
"@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": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@apollo/react-hooks/-/react-hooks-3.1.2.tgz",
@ -2722,9 +2698,9 @@
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
},
"electron-to-chromium": {
"version": "1.3.277",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.277.tgz",
"integrity": "sha512-Czmsrgng89DOgJlIknnw9bn5431QdtnUwGp5YYiPwU1DbZQUxCLF+rc1ZC09VNAdalOPcvH6AE8BaA0H5HjI/w=="
"version": "1.3.278",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.278.tgz",
"integrity": "sha512-4cPkOCY5k4z69MHOA96VUt+Wl24AbLHQcm7W9ckabJ/iRe7oBFNMiliw75lK/w++R9bKCUxJ0mFnMRMylnAlbA=="
},
"elliptic": {
"version": "6.5.1",
@ -4342,14 +4318,6 @@
"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": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
@ -6570,18 +6538,6 @@
"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": {
"version": "16.10.2",
"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",
"dependencies": {
"@apollo/react-hooks": "^3.1.2",
"@apollo/react-ssr": "^3.1.2",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link": "^1.2.13",
"apollo-upload-client": "^11.0.0",
"babel-plugin-graphql-tag": "^2.5.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.3",
@ -24,7 +25,6 @@
"graphql-tag": "^2.10.1",
"next": "^9.1.1",
"react": "^16.10.2",
"react-apollo": "^3.1.2",
"react-dom": "^16.10.2"
},
"devDependencies": {

3
app/pages/_app.js
View File

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

8
app/pages/index.js
View File

@ -1,9 +1,9 @@
import Page from '../components/Page'
import Section from '../components/Section'
import UploadBlob from '../components/UploadBlob'
import UploadFile from '../components/UploadFile'
import UploadFileList from '../components/UploadFileList'
import Uploads from '../components/Uploads'
import { UploadBlob } from '../components/UploadBlob'
import { UploadFile } from '../components/UploadFile'
import { UploadFileList } from '../components/UploadFileList'
import { Uploads } from '../components/Uploads'
const IndexPage = () => (
<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
}
}
`