Added remove props handler

src/apolloclient.js

@@ -1,5 +1,3 @@
-import { onError } from "@apollo/client/link/error";
-import { WebSocketLink } from "@apollo/client/link/ws";
 import {
   ApolloClient,
   InMemoryCache,
@@ -8,8 +6,9 @@ import {
   HttpLink,
   split,
 } from "@apollo/client";
+import { WebSocketLink } from "@apollo/client/link/ws";
+import { onError } from "@apollo/client/link/error";
 import { getMainDefinition } from "@apollo/client/utilities";
-
 import {
   propertyVectorFragment,
   vectorFragment,
@@ -17,12 +16,10 @@ import {
 } from "./graphql/fragment";
 import { isConnectedQuery } from "./graphql/query";
 
-// Create an http link:
 const httpLink = new HttpLink({
   uri: "/graphql",
 });
 
-// Create a WebSocket link:
 const wsLink = new WebSocketLink({
   uri: `ws://${window.location.host}/graphql`,
   options: {
@@ -68,15 +65,17 @@ const client = new ApolloClient({
           },
         },
       },
+      Device: {
+        fields: {
+          messages: {
+            read(val = []) {
+              return val;
+            },
+          },
+        },
+      },
     },
   }),
-  resolvers: {
-    Device: {
-      messages() {
-        return [];
-      },
-    },
-  },
 });
 
 const CONNECTED = gql`
@@ -214,6 +213,36 @@ client
     });
   });
 
+const REMOVE_PROPERTY = gql`
+  subscription removeProperty {
+    removeProperty {
+      id
+      device
+    }
+  }
+`;
+
+client
+  .subscribe({
+    query: REMOVE_PROPERTY,
+  })
+  .subscribe(({ data }) => {
+    const res = client.readQuery({
+      query: GETDEVICE,
+      variables: { id: data.removeProperty.device },
+    });
+    client.writeQuery({
+      query: GETDEVICE,
+      variables: { id: res.device.id },
+      data: {
+        device: {
+          ...res.device,
+          properties: res.device.properties.filter(p => p.name !== data.removeProperty.id),
+        },
+      },
+    });
+  });
+
 const NEW_VALUE = gql`
   subscription newValue {
     newValue {