Adapted to astraw-server

src/apolloclient.js

@@ -58,13 +58,13 @@ const client = new ApolloClient({
       IndiVector: ["NumberVector", "SwitchVector", "TextVector", "LightVector"],
     },
     typePolicies: {
-      /*Query: {
+      Query: {
         fields: {
           device(_, { toReference, args }) {
             return toReference({ __typename: "IndiDevice", id: args.id });
           },
         },
-      },*/
+      },
       IndiDevice: {
         fields: {
           messages: {
@@ -129,17 +129,53 @@ client
           /*drivers:
             data.newProperty.name === "DRIVER_INFO"
               ? data.newProperty.vector.values[3].text
-              : res.device.drivers,
+              : res.device.drivers,*/
           connected:
-            data.newProperty.name === "CONNECTION"
-              ? data.newProperty.vector.values[0].switch
-              : res.device.connected,*/
+            data.newIndiProp.name === "CONNECTION"
+              ? data.newIndiProp.vector.values[0].switch
+              : res.device.connected,
           properties: [...res.device.properties, data.newIndiProp],
         },
       },
     });
   });
 
+const NEW_VALUE = gql`
+  subscription newIndiValue {
+    newIndiValue {
+      id
+      device
+      ...VectorData
+    }
+  }
+
+  ${vectorFragment}
+`;
+
+client
+  .subscribe({
+    query: NEW_VALUE,
+  })
+  .subscribe(({ data }) => {
+    if (data.newIndiValue.name === "CONNECTION") {
+      const res = client.readQuery({
+        query: GETDEVICE,
+        variables: { id: data.newIndiValue.device },
+      });
+      client.writeQuery({
+        query: GETDEVICE,
+        variables: { id: res.device.id },
+        data: {
+          device: {
+            ...res.device,
+            connected: data.newIndiValue.values[0].switch,
+          },
+        },
+      });
+      console.log(res);
+    }
+  });
+
 /*
 const CONNECTED = gql`
   subscription connected {

src/devices.js

@@ -7,6 +7,7 @@ import Device from "./components/indi/device";
 import { Box, Tabs, Tab, Button, Header, Heading, Layer } from "grommet";
 import { Contact } from "grommet-icons";
 import { isConnectedQuery } from "./graphql/query";
+import { StatusGood, StatusDisabled } from "grommet-icons";
 
 const GETDEVICES = gql`
   query devices {
@@ -103,8 +104,16 @@ const Devices = () => {
           <Tabs justify="start">
             {data && data.devices ? (
               data.devices.map((d) => (
-                <Tab title={d.name} key={d.id}>
-                  <Device device={d} messages={openMsg} onMessagesClosed={() => setOpenMsg(false)}/>
+                <Tab
+                  icon={d.connected ? <StatusGood /> : <StatusDisabled />}
+                  title={d.name}
+                  key={d.id}
+                >
+                  <Device
+                    device={d}
+                    messages={openMsg}
+                    onMessagesClosed={() => setOpenMsg(false)}
+                  />
                 </Tab>
               ))
             ) : (