Upgraded apollo client to 3.0

genFragmentMatcher.js

@@ -1,39 +0,0 @@
-
-const fetch = require('node-fetch');
-const fs = require('fs');
-
-fetch(`http://localhost:4000/graphql`, {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({
-    variables: {},
-    query: `
-      {
-        __schema {
-          types {
-            kind
-            name
-            possibleTypes {
-              name
-            }
-          }
-        }
-      }
-    `,
-  }),
-})
-  .then(result => result.json())
-  .then(result => {
-    // here we're filtering out any type information unrelated to unions or interfaces
-    const filteredData = result.data.__schema.types.filter(
-      type => type.possibleTypes !== null,
-    );
-    result.data.__schema.types = filteredData;
-    fs.writeFileSync('./src/fragmentTypes.json', JSON.stringify(result.data), err => {
-      if (err) {
-        console.error('Error writing fragmentTypes file', err);
-      } else {
-        console.log('Fragment types successfully extracted!');
-      }
-    });
-  });

package.json

@@ -3,18 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.5",
+    "@apollo/client": "^3.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "apollo-cache-inmemory": "^1.6.6",
+    "graphql": "^14.0.0",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
-    "apollo-link-ws": "^1.0.20",
-    "graphql": "^14.6.0",
-    "graphql-tag": "^2.10.3",
     "grommet": "^2.13.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/App.js

@@ -5,7 +5,7 @@ import { Grommet, Box, grommet } from "grommet";
 import { deepMerge } from "grommet/utils";
 
 import client from "./apolloclient";
-import { ApolloProvider } from "@apollo/react-hooks";
+import { ApolloProvider } from "@apollo/client";
 import Devices from "./devices";
 
 const theme = deepMerge(grommet, {

src/apolloclient.js

@@ -1,16 +1,14 @@
-import { ApolloClient } from "apollo-client";
+import { onError } from "@apollo/client/link/error";
+import { WebSocketLink } from "@apollo/client/link/ws";
 import {
+  ApolloClient,
   InMemoryCache,
-  IntrospectionFragmentMatcher,
+  gql,
-} from "apollo-cache-inmemory";
+  ApolloLink,
-import { HttpLink } from "apollo-link-http";
+  HttpLink,
-import { onError } from "apollo-link-error";
+  split,
-import { ApolloLink, split } from "apollo-link";
+} from "@apollo/client";
-import { WebSocketLink } from "apollo-link-ws";
+import { getMainDefinition } from "@apollo/client/utilities";
-import { getMainDefinition } from "apollo-utilities";
-import gql from "graphql-tag";
-
-import introspectionQueryResultData from "./fragmentTypes.json";
 
 import {
   propertyVectorFragment,
@@ -59,13 +57,16 @@ const client = new ApolloClient({
     link,
   ]),
   cache: new InMemoryCache({
-    fragmentMatcher: new IntrospectionFragmentMatcher({
+    possibleTypes: {
-      introspectionQueryResultData,
+      Vector: ["NumberVector", "SwitchVector", "TextVector", "LightVector"],
-    }),
+    },
-    cacheRedirects: {
+    typePolicies: {
       Query: {
-        device: (_, args, { getCacheKey }) =>
+        fields: {
-          getCacheKey({ __typename: "Device", id: args.id }),
+          device(_, { toReference, args }) {
+            return toReference({ __typename: "Device", id: args.id });
+          },
+        },
       },
     },
   }),

src/components/indi/device.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from "react";
-import { useMutation, useApolloClient } from "@apollo/react-hooks";
+import { useApolloClient } from "@apollo/client";
 import { msgToColor } from "../../utils/indi";
 import Property from "./property";
 import gql from "graphql-tag";

src/components/indi/number.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Box, TextInput, Button, Text } from "grommet";
 import gql from "graphql-tag";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 
 const SEND = gql`
   mutation sendOneNumber($input: OneNumberInput!) {

src/components/indi/switch.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Box } from "grommet";
 import gql from "graphql-tag";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 
 const SEND = gql`
   mutation sendSwitch($input: SwitchInput!) {

src/components/indi/text.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Box, Button, TextInput, Text } from "grommet";
 import gql from "graphql-tag";
-import { useMutation } from "@apollo/react-hooks";
+import { useMutation } from "@apollo/client";
 
 const SEND = gql`
   mutation sendOneText($input: OneTextInput!) {

src/devices.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { useQuery, useSubscription, useMutation } from "@apollo/react-hooks";
+import { useQuery, useMutation } from "@apollo/client";
 import gql from "graphql-tag";
 import { deviceInfoFragment, propertyVectorFragment } from "./graphql/fragment";
 import Device from "./components/indi/device";

src/fragmentTypes.json

@@ -1 +0,0 @@
-{"__schema":{"types":[{"kind":"INTERFACE","name":"Vector","possibleTypes":[{"name":"NumberVector"},{"name":"SwitchVector"},{"name":"TextVector"},{"name":"LightVector"}]}]}}