Upgraded apollo client to 3.0

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