From 7ffa0546be56e2978f9e233ded23fded18e5b9fb Mon Sep 17 00:00:00 2001
From: Jayden Seric <me@jaydenseric.com>
Date: Wed, 9 Oct 2019 18:58:43 +1100
Subject: [PATCH] Switch from react-apollo to @apollo/react-hooks.

---
 app/components/UploadBlob.js     | 108 ++++++++++++-------------------
 app/components/UploadFile.js     |  50 +++++---------
 app/components/UploadFileList.js |  50 +++++---------
 app/components/Uploads.js        |  53 +++++++++------
 app/package-lock.json            |  50 +-------------
 app/package.json                 |   4 +-
 app/pages/_app.js                |   3 +-
 app/pages/index.js               |   8 +--
 app/queries/uploads.js           |  12 ----
 9 files changed, 120 insertions(+), 218 deletions(-)
 delete mode 100644 app/queries/uploads.js

diff --git a/app/components/UploadBlob.js b/app/components/UploadBlob.js
index cca872e..f75898d 100644
--- a/app/components/UploadBlob.js
+++ b/app/components/UploadBlob.js
@@ -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)
diff --git a/app/components/UploadFile.js b/app/components/UploadFile.js
index bf4fb88..735e6d8 100644
--- a/app/components/UploadFile.js
+++ b/app/components/UploadFile.js
@@ -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)
diff --git a/app/components/UploadFileList.js b/app/components/UploadFileList.js
index 96c6caa..e98c420 100644
--- a/app/components/UploadFileList.js
+++ b/app/components/UploadFileList.js
@@ -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} />
+}
diff --git a/app/components/Uploads.js b/app/components/Uploads.js
index 5169c9d..534c10c 100644
--- a/app/components/Uploads.js
+++ b/app/components/Uploads.js
@@ -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>
+      ))}
+    />
+  )
+}
diff --git a/app/package-lock.json b/app/package-lock.json
index 951e3ea..7a0c201 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -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",
diff --git a/app/package.json b/app/package.json
index 9934f3e..a8f3b37 100644
--- a/app/package.json
+++ b/app/package.json
@@ -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": {
diff --git a/app/pages/_app.js b/app/pages/_app.js
index a61e905..e086ced 100644
--- a/app/pages/_app.js
+++ b/app/pages/_app.js
@@ -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}
diff --git a/app/pages/index.js b/app/pages/index.js
index 9308be3..e374e8f 100644
--- a/app/pages/index.js
+++ b/app/pages/index.js
@@ -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">
diff --git a/app/queries/uploads.js b/app/queries/uploads.js
deleted file mode 100644
index 256aab6..0000000
--- a/app/queries/uploads.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import gql from 'graphql-tag'
-
-export default gql`
-  query uploads {
-    uploads {
-      id
-      filename
-      mimetype
-      path
-    }
-  }
-`