[grid] Stop polling when component is unmounted (UI)

Author: diemol

javascript/grid-ui/src/screens/Overview/Overview.tsx

@@ -38,8 +38,16 @@ export default function Overview() {
   const classes = useStyles();
   const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
 
-  const {loading, error, data} = useQuery(NODES_QUERY,
-    {pollInterval: GridConfig.status.xhrPollingIntervalMillis, fetchPolicy: "network-only"});
+  const {loading, error, data, stopPolling, startPolling} = useQuery(NODES_QUERY,
+    {fetchPolicy: "network-only"});
+
+  React.useEffect(() => {
+    startPolling(GridConfig.status.xhrPollingIntervalMillis);
+    return () => {
+      stopPolling();
+    };
+  });
+
   if (loading) {
     return (
       <Grid container spacing={3}>

javascript/grid-ui/src/screens/Sessions/Sessions.tsx

@@ -14,8 +14,16 @@ const GRID_SESSIONS_QUERY = loader("../../graphql/sessions.gql");
 
 export default function Sessions() {
 
-  const {loading, error, data} = useQuery(GRID_SESSIONS_QUERY,
-    {pollInterval: GridConfig.status.xhrPollingIntervalMillis, fetchPolicy: "network-only"});
+  const {loading, error, data, stopPolling, startPolling} = useQuery(GRID_SESSIONS_QUERY,
+    {fetchPolicy: "network-only"});
+
+  React.useEffect(() => {
+    startPolling(GridConfig.status.xhrPollingIntervalMillis);
+    return () => {
+      stopPolling();
+    };
+  });
+
   if (loading) {
     return (
       <Grid container spacing={3}>