Migrate to apollo v3

ui/package-lock.json

@@ -4,9 +4,9 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "react-apollo": {
+    "@apollo/client": {
       "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/react-apollo/-/client-3.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.2.5.tgz",
       "integrity": "sha512-zpruxnFMz6K94gs2pqc3sidzFDbQpKT5D6P/J/I9s8ekHZ5eczgnRp6pqXC86Bh7+44j/btpmOT0kwiboyqTnA==",
       "dev": true,
       "requires": {
@@ -3277,7 +3277,8 @@
     "@types/node": {
       "version": "14.11.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.2.tgz",
-      "integrity": "sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA=="
+      "integrity": "sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA==",
+      "dev": true
     },
     "@types/normalize-package-data": {
       "version": "2.4.0",
@@ -3300,14 +3301,22 @@
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
-      "dev": true
     },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "@types/react": {
+      "version": "16.9.53",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.53.tgz",
+      "integrity": "sha512-4nW60Sd4L7+WMXH1D6jCdVftuW7j4Za6zdp6tJ33Rqv0nk1ZAmQKML9ZLD4H0dehA3FZxXR/GM8gXplf82oNGw==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/stack-utils": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz",
@@ -3332,7 +3341,8 @@
     "@types/zen-observable": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.1.tgz",
-      "integrity": "sha512-wmk0xQI6Yy7Fs/il4EpOcflG4uonUpYGqvZARESLc2oy4u69fkatFLbJOeW4Q6awO15P4rduAe6xkwHevpXcUQ=="
+      "integrity": "sha512-wmk0xQI6Yy7Fs/il4EpOcflG4uonUpYGqvZARESLc2oy4u69fkatFLbJOeW4Q6awO15P4rduAe6xkwHevpXcUQ==",
+      "dev": true
     },
     "@typescript-eslint/experimental-utils": {
       "version": "4.6.0",
@@ -3406,23 +3416,6 @@
         }
       }
     },
-    "@wry/context": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.4.4.tgz",
-      "integrity": "sha512-LrKVLove/zw6h2Md/KZyWxIkFM6AoyKp71OqpH9Hiip1csjPVoD3tPxlbQUNxEnHENks3UGgNpSBCAfq9KWuag==",
-      "requires": {
-        "@types/node": ">=6",
-        "tslib": "^1.9.3"
-      }
-    },
-    "@wry/equality": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.11.tgz",
-      "integrity": "sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==",
-      "requires": {
-        "tslib": "^1.9.3"
-      }
-    },
     "abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -3549,112 +3542,6 @@
         }
       }
     },
-    "apollo-cache": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.5.tgz",
-      "integrity": "sha512-1XoDy8kJnyWY/i/+gLTEbYLnoiVtS8y7ikBr/IfmML4Qb+CM7dEEbIUOjnY716WqmZ/UpXIxTfJsY7rMcqiCXA==",
-      "requires": {
-        "apollo-utilities": "^1.3.4",
-        "tslib": "^1.10.0"
-      }
-    },
-    "apollo-cache-inmemory": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.6.tgz",
-      "integrity": "sha512-L8pToTW/+Xru2FFAhkZ1OA9q4V4nuvfoPecBM34DecAugUZEBhI2Hmpgnzq2hTKZ60LAMrlqiASm0aqAY6F8/A==",
-      "requires": {
-        "apollo-cache": "^1.3.5",
-        "apollo-utilities": "^1.3.4",
-        "optimism": "^0.10.0",
-        "ts-invariant": "^0.4.0",
-        "tslib": "^1.10.0"
-      }
-    },
-    "apollo-client": {
-      "version": "2.6.10",
-      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.10.tgz",
-      "integrity": "sha512-jiPlMTN6/5CjZpJOkGeUV0mb4zxx33uXWdj/xQCfAMkuNAC3HN7CvYDyMHHEzmcQ5GV12LszWoQ/VlxET24CtA==",
-      "requires": {
-        "@types/zen-observable": "^0.8.0",
-        "apollo-cache": "1.3.5",
-        "apollo-link": "^1.0.0",
-        "apollo-utilities": "1.3.4",
-        "symbol-observable": "^1.0.2",
-        "ts-invariant": "^0.4.0",
-        "tslib": "^1.10.0",
-        "zen-observable": "^0.8.0"
-      }
-    },
-    "apollo-link": {
-      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.14.tgz",
-      "integrity": "sha512-p67CMEFP7kOG1JZ0ZkYZwRDa369w5PIjtMjvrQd/HnIV8FRsHRqLqK+oAZQnFa1DDdZtOtHTi+aMIW6EatC2jg==",
-      "requires": {
-        "apollo-utilities": "^1.3.0",
-        "ts-invariant": "^0.4.0",
-        "tslib": "^1.9.3",
-        "zen-observable-ts": "^0.8.21"
-      }
-    },
-    "apollo-link-context": {
-      "version": "1.0.20",
-      "resolved": "https://registry.npmjs.org/apollo-link-context/-/apollo-link-context-1.0.20.tgz",
-      "integrity": "sha512-MLLPYvhzNb8AglNsk2NcL9AvhO/Vc9hn2ZZuegbhRHGet3oGr0YH9s30NS9+ieoM0sGT11p7oZ6oAILM/kiRBA==",
-      "requires": {
-        "apollo-link": "^1.2.14",
-        "tslib": "^1.9.3"
-      }
-    },
-    "apollo-link-error": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/apollo-link-error/-/apollo-link-error-1.1.13.tgz",
-      "integrity": "sha512-jAZOOahJU6bwSqb2ZyskEK1XdgUY9nkmeclCrW7Gddh1uasHVqmoYc4CKdb0/H0Y1J9lvaXKle2Wsw/Zx1AyUg==",
-      "requires": {
-        "apollo-link": "^1.2.14",
-        "apollo-link-http-common": "^0.2.16",
-        "tslib": "^1.9.3"
-      }
-    },
-    "apollo-link-http": {
-      "version": "1.5.17",
-      "resolved": "https://registry.npmjs.org/apollo-link-http/-/apollo-link-http-1.5.17.tgz",
-      "integrity": "sha512-uWcqAotbwDEU/9+Dm9e1/clO7hTB2kQ/94JYcGouBVLjoKmTeJTUPQKcJGpPwUjZcSqgYicbFqQSoJIW0yrFvg==",
-      "requires": {
-        "apollo-link": "^1.2.14",
-        "apollo-link-http-common": "^0.2.16",
-        "tslib": "^1.9.3"
-      }
-    },
-    "apollo-link-http-common": {
-      "version": "0.2.16",
-      "resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.16.tgz",
-      "integrity": "sha512-2tIhOIrnaF4UbQHf7kjeQA/EmSorB7+HyJIIrUjJOKBgnXwuexi8aMecRlqTIDWcyVXCeqLhUnztMa6bOH/jTg==",
-      "requires": {
-        "apollo-link": "^1.2.14",
-        "ts-invariant": "^0.4.0",
-        "tslib": "^1.9.3"
-      }
-    },
-    "apollo-link-ws": {
-      "version": "1.0.20",
-      "resolved": "https://registry.npmjs.org/apollo-link-ws/-/apollo-link-ws-1.0.20.tgz",
-      "integrity": "sha512-mjSFPlQxmoLArpHBeUb2Xj+2HDYeTaJqFGOqQ+I8NVJxgL9lJe84PDWcPah/yMLv3rB7QgBDSuZ0xoRFBPlySw==",
-      "requires": {
-        "apollo-link": "^1.2.14",
-        "tslib": "^1.9.3"
-      }
-    },
-    "apollo-utilities": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.4.tgz",
-      "integrity": "sha512-pk2hiWrCXMAy2fRPwEyhvka+mqwzeP60Jr1tRYi5xru+3ko94HI9o6lK0CT33/w4RDlxWchmdhDCrvdr+pHCig==",
-      "requires": {
-        "@wry/equality": "^0.1.2",
-        "fast-json-stable-stringify": "^2.0.0",
-        "ts-invariant": "^0.4.0",
-        "tslib": "^1.10.0"
-      }
-    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -5308,6 +5195,11 @@
         "cssom": "0.3.x"
       }
     },
+    "csstype": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.4.tgz",
+      "integrity": "sha512-xc8DUsCLmjvCfoD7LTGE0ou2MIWLx0K9RCZwSHMOdynqRsP4MtUcLeqh1HcQ2dInwDTqn+3CE0/FZh1et+p4jA=="
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -6889,14 +6781,18 @@
       }
     },
     "graphql": {
-      "version": "15.4.0",
+      "version": "14.7.0",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.7.0.tgz",
-      "integrity": "sha512-EB3zgGchcabbsU9cFe1j+yxdzKQKAbGUWRb13DsrsMN1yyfmmIq+2+L5MqVWcDCE4V89R5AyUOi7sMOGxdsYtA=="
+      "integrity": "sha512-l0xWZpoPKpppFzMfvVyFmp9vLN7w/ZZJPefUicMCepfJeQ8sMcztloGYY9DfjVPo6tIUDzU5Hw3MUbIjj9AVVA==",
+      "requires": {
+        "iterall": "^1.2.2"
+      }
     },
     "graphql-tag": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.11.0.tgz",
-      "integrity": "sha512-VmsD5pJqWJnQZMUeRwrDhfgoyqcfwEkvtpANqcoUG8/tOLkwNgU9mzub/Mc78OJMhHjx7gfAMTxzdG43VGg3bA=="
+      "integrity": "sha512-VmsD5pJqWJnQZMUeRwrDhfgoyqcfwEkvtpANqcoUG8/tOLkwNgU9mzub/Mc78OJMhHjx7gfAMTxzdG43VGg3bA==",
+      "dev": true
     },
     "grid-index": {
       "version": "1.1.0",
@@ -10700,14 +10596,6 @@
         "is-wsl": "^1.1.0"
       }
     },
-    "optimism": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.10.3.tgz",
-      "integrity": "sha512-9A5pqGoQk49H6Vhjb9kPgAeeECfUDF6aIICbMDL23kDLStBn1MWk3YvcZ4xWF9CsSf6XEgvRLkXy4xof/56vVw==",
-      "requires": {
-        "@wry/context": "^0.4.0"
-      }
-    },
     "optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -11779,22 +11667,35 @@
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
     },
     "react": {
-      "version": "17.0.1",
+      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-dom": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+          "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
           "requires": {
             "loose-envify": "^1.1.0",
             "object-assign": "^4.1.1"
           }
-    },
+        }
-    "react-dom": {
-      "version": "17.0.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
-      "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.1"
       }
     },
     "react-fast-compare": {
@@ -12418,6 +12319,7 @@
       "version": "0.20.1",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz",
       "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -13541,6 +13443,7 @@
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
       "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+      "dev": true,
       "requires": {
         "tslib": "^1.9.3"
       }
@@ -13548,7 +13451,8 @@
     "tslib": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-      "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
+      "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+      "dev": true
     },
     "tsutils": {
       "version": "3.17.1",
@@ -14379,16 +14283,8 @@
     "zen-observable": {
       "version": "0.8.15",
       "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
-      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==",
-    },
+      "dev": true
-    "zen-observable-ts": {
-      "version": "0.8.21",
-      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.21.tgz",
-      "integrity": "sha512-Yj3yXweRc8LdRMrCC8nIc4kkjWecPAUVh0TI0OUrWXx6aX790vLcDlWca6I4vsyCGH3LpWxq0dJRcMOFoVqmeg==",
-      "requires": {
-        "tslib": "^1.9.3",
-        "zen-observable": "^0.8.0"
-      }
     }
   }
 }

ui/package.json

@@ -5,23 +5,15 @@
   "description": "UI app for Photoview",
   "dependencies": {
     "@babel/preset-env": "^7.12.1",
-    "apollo-cache-inmemory": "^1.6.6",
+    "@types/react": "^16.9.53",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-context": "^1.0.20",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
-    "apollo-link-ws": "^1.0.20",
     "babel-plugin-styled-components": "^1.11.1",
     "copy-to-clipboard": "^3.3.1",
     "downloadjs": "^1.4.7",
-    "graphql": "^15.4.0",
+    "graphql": "^14.7.0",
-    "graphql-tag": "^2.11.0",
     "parcel-bundler": "^1.12.4",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
+    "react": "^16.14.0",
-    "react-apollo": "^3.1.5",
+    "react-dom": "^16.14.0",
-    "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-lazyload": "^3.1.0",
     "react-router-dom": "^5.2.0",
@@ -40,7 +32,7 @@
     "jest": "jest"
   },
   "devDependencies": {
-    "react-apollo": "^3.2.5",
+    "@apollo/client": "^3.2.5",
     "@babel/core": "^7.12.3",
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.1",

ui/src/Layout.js

@@ -4,8 +4,7 @@ import styled from 'styled-components'
 import { NavLink } from 'react-router-dom'
 import { Icon } from 'semantic-ui-react'
 import Sidebar from './components/sidebar/Sidebar'
-import { useQuery, useLazyQuery } from 'react-apollo'
+import { useQuery, useLazyQuery, gql } from '@apollo/client'
-import gql from 'graphql-tag'
 import { Authorized } from './components/routes/AuthorizedRoute'
 import { Helmet } from 'react-helmet'
 import Header from './components/header/Header'

ui/src/Pages/AlbumPage/AlbumPage.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useState, useEffect } from 'react'
 import ReactRouterPropTypes from 'react-router-prop-types'
 import { useLocation } from 'react-router-dom'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
-import { Query } from 'react-apollo'
+import { Query } from '@apollo/client/react/components'
 import AlbumGallery from '../../components/albumGallery/AlbumGallery'
 import PropTypes from 'prop-types'
 import Layout from '../../Layout'

ui/src/Pages/AllAlbumsPage/AlbumsPage.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import AlbumBoxes from '../../components/albumGallery/AlbumBoxes'
 import Layout from '../../Layout'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
-import { Query } from 'react-apollo'
+import { Query } from '@apollo/client/react/components'
 
 const getAlbumsQuery = gql`
   query getMyAlbums {

ui/src/Pages/LoginPage/InitialSetupPage.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
-import { Mutation, Query } from 'react-apollo'
+import { Mutation, Query } from '@apollo/client/react/components'
 import { Redirect } from 'react-router-dom'
 import { Button, Form, Message, Header } from 'semantic-ui-react'
 import { Container } from './loginUtilities'

ui/src/Pages/LoginPage/LoginPage.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
-import { Mutation, Query } from 'react-apollo'
+import { Mutation, Query } from '@apollo/client/react/components'
 import { Redirect } from 'react-router-dom'
 import styled from 'styled-components'
 import { Button, Form, Message, Header } from 'semantic-ui-react'

ui/src/Pages/LoginPage/loginUtilities.js

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 import { saveTokenCookie } from '../../authentication'
 import styled from 'styled-components'
 import { Container as SemanticContainer } from 'semantic-ui-react'

ui/src/Pages/PlacesPage/MapPresentMarker.js

@@ -1,7 +1,7 @@
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import { useLazyQuery } from 'react-apollo'
+import { useLazyQuery } from '@apollo/client'
 import PresentView from '../../components/photoGallery/presentView/PresentView'
 
 const QUERY_MEDIA = gql`

ui/src/Pages/PlacesPage/PlacesPage.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { useQuery } from 'react-apollo'
+import { useQuery, gql } from '@apollo/client'
-import gql from 'graphql-tag'
 import styled from 'styled-components'
 
 import 'mapbox-gl/dist/mapbox-gl.css'

ui/src/Pages/SettingsPage/AddUserRow.js

@@ -1,7 +1,7 @@
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { Mutation } from 'react-apollo'
+import { Mutation } from '@apollo/client'
 import { Button, Checkbox, Input, Table } from 'semantic-ui-react'
 
 const createUserMutation = gql`

ui/src/Pages/SettingsPage/PeriodicScanner.js

@@ -1,6 +1,6 @@
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 import React, { useRef, useState } from 'react'
-import { useMutation, useQuery } from 'react-apollo'
+import { useMutation, useQuery } from '@apollo/client'
 import { Checkbox, Dropdown, Input, Loader } from 'semantic-ui-react'
 import { InputLabelDescription, InputLabelTitle } from './SettingsPage'
 

ui/src/Pages/SettingsPage/ScannerConcurrentWorkers.js

@@ -1,6 +1,5 @@
-import gql from 'graphql-tag'
 import React, { useRef, useState } from 'react'
-import { useQuery, useMutation } from 'react-apollo'
+import { useQuery, useMutation, gql } from '@apollo/client'
 import { Input, Loader } from 'semantic-ui-react'
 import { InputLabelTitle, InputLabelDescription } from './SettingsPage'
 

ui/src/Pages/SettingsPage/ScannerSection.js

@@ -1,6 +1,5 @@
-import gql from 'graphql-tag'
 import React from 'react'
-import { useMutation } from 'react-apollo'
+import { useMutation, gql } from '@apollo/client'
 import { Button, Icon } from 'semantic-ui-react'
 import PeriodicScanner from './PeriodicScanner'
 import ScannerConcurrentWorkers from './ScannerConcurrentWorkers'

ui/src/Pages/SettingsPage/UserRow.js

@@ -1,7 +1,7 @@
-import gql from 'graphql-tag'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { Mutation } from 'react-apollo'
+import { Mutation } from '@apollo/client/react/components'
+import { gql } from '@apollo/client'
 import {
   Button,
   Checkbox,

ui/src/Pages/SettingsPage/UsersTable.js

@@ -1,8 +1,7 @@
 import React, { useState } from 'react'
 
 import { Table, Loader, Button, Icon } from 'semantic-ui-react'
-import { useQuery } from 'react-apollo'
+import { useQuery, gql } from '@apollo/client'
-import gql from 'graphql-tag'
 import UserRow from './UserRow'
 import AddUserRow from './AddUserRow'
 import { SectionTitle } from './SettingsPage'

ui/src/Pages/SharePage/SharePage.js

@@ -1,7 +1,6 @@
-import gql from 'graphql-tag'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useQuery } from 'react-apollo'
+import { useQuery, gql } from '@apollo/client'
 import { Route, Switch } from 'react-router-dom'
 import RouterProps from 'react-router-prop-types'
 import { Form, Header, Icon, Input, Message } from 'semantic-ui-react'

ui/src/Pages/SharePage/SharePage.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { MemoryRouter } from 'react-router-dom'
-import { MockedProvider } from 'react-apollo/testing'
+import { MockedProvider } from '@apollo/client/testing'
 import { create } from 'react-test-renderer'
 
 import SharePage, { SHARE_TOKEN_QUERY } from './SharePage'

ui/src/apolloClient.js

@@ -1,10 +1,14 @@
-import { InMemoryCache } from 'apollo-cache-inmemory'
+import {
-import { ApolloClient } from 'apollo-client'
+  InMemoryCache,
-import { ApolloLink, split } from 'apollo-link'
+  ApolloClient,
-import { onError } from 'apollo-link-error'
+  split,
-import { HttpLink } from 'apollo-link-http'
+  ApolloLink,
-import { WebSocketLink } from 'apollo-link-ws'
+  HttpLink,
-import { getMainDefinition } from 'apollo-utilities'
+} from '@apollo/client'
+import { getMainDefinition } from '@apollo/client/utilities'
+import { onError } from '@apollo/client/link/error'
+import { WebSocketLink } from '@apollo/client/link/ws'
+
 import urlJoin from 'url-join'
 import { clearTokenCookie } from './authentication'
 import { MessageState } from './components/messages/Messages'

ui/src/components/AlbumTitle.js

@@ -6,8 +6,7 @@ import styled from 'styled-components'
 import { Icon } from 'semantic-ui-react'
 import { SidebarContext } from './sidebar/Sidebar'
 import AlbumSidebar from './sidebar/AlbumSidebar'
-import gql from 'graphql-tag'
+import { useLazyQuery, gql } from '@apollo/client'
-import { useLazyQuery } from '@apollo/react-hooks'
 import { authToken } from '../authentication'
 
 const Header = styled.h1`

ui/src/components/header/Searchbar.js

@@ -1,8 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { useLazyQuery } from '@apollo/react-hooks'
+import { useLazyQuery, gql } from '@apollo/client'
-import gql from 'graphql-tag'
 import debounce from '../../debounce'
 import { ProtectedImage } from '../photoGallery/ProtectedMedia'
 import { NavLink } from 'react-router-dom'

ui/src/components/messages/SubscriptionsHook.js

@@ -1,7 +1,6 @@
-import gql from 'graphql-tag'
 import PropTypes from 'prop-types'
 import { useEffect } from 'react'
-import { useSubscription } from 'react-apollo'
+import { useSubscription, gql } from '@apollo/client'
 import { authToken } from '../../authentication'
 
 const notificationSubscription = gql`

ui/src/components/photoGallery/GalleryGroups.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import gql from 'graphql-tag'
+import { useQuery, gql } from '@apollo/client'
-import { useQuery } from 'react-apollo'
 import PhotoGallery from '../../components/photoGallery/PhotoGallery'
 import AlbumTitle from '../../components/AlbumTitle'
 import { authToken } from '../../authentication'

ui/src/components/photoGallery/MediaThumbnail.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import gql from 'graphql-tag'
+import { useMutation, gql } from '@apollo/client'
-import { useMutation } from 'react-apollo'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import LazyLoad from 'react-lazyload'

ui/src/components/routes/AuthorizedRoute.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Route, Redirect } from 'react-router-dom'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
-import { Query } from 'react-apollo'
+import { Query } from '@apollo/client/react/components'
 import { authToken } from '../../authentication'
 
 const adminQuery = gql`

ui/src/components/sidebar/AlbumSidebar.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Query } from 'react-apollo'
+import { Query } from '@apollo/client/react/components'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 import SidebarShare from './Sharing'
 
 const albumQuery = gql`

ui/src/components/sidebar/MediaSidebar.js

@@ -1,7 +1,6 @@
-import gql from 'graphql-tag'
 import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
-import { useLazyQuery } from 'react-apollo'
+import { useLazyQuery, gql } from '@apollo/client'
 import styled from 'styled-components'
 import { authToken } from '../../authentication'
 import { ProtectedImage, ProtectedVideo } from '../photoGallery/ProtectedMedia'

ui/src/components/sidebar/Sharing.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { useMutation, useQuery } from 'react-apollo'
+import { useMutation, useQuery, gql } from '@apollo/client'
-import gql from 'graphql-tag'
 import {
   Table,
   Button,

ui/src/components/sidebar/SidebarDownload.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 import { Table } from 'semantic-ui-react'
 import styled from 'styled-components'
 import { MessageState } from '../messages/Messages'
-import { useLazyQuery } from 'react-apollo'
+import { useLazyQuery, gql } from '@apollo/client'
-import gql from 'graphql-tag'
 import download from 'downloadjs'
 import { authToken } from '../../authentication'
 

ui/src/index.js

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom'
 import App from './App'
 import registerServiceWorker from './registerServiceWorker'
 import client from './apolloClient'
-import { ApolloProvider } from 'react-apollo'
+import { ApolloProvider } from '@apollo/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 
 const Main = () => (