Merge pull request #30 from viamrobotics/better-polling

Only poll once request roundtrips have finished

Author: micheal-parks

.changeset/seven-bags-switch.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/svelte-sdk': minor
+---
+
+Only poll once request round trips have finished

src/lib/hooks/create-resource-query.svelte.ts

@@ -5,6 +5,7 @@ import {
 } from '@tanstack/svelte-query';
 import type { Resource } from '@viamrobotics/sdk';
 import { toStore, fromStore } from 'svelte/store';
+import { usePolling } from './use-polling.svelte';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type ArgumentsType<T> = T extends (...args: infer U) => any ? U : never;
@@ -35,7 +36,7 @@ export const createResourceQuery = <T extends Resource, K extends keyof T>(
 ): { current: QueryObserverResult<ResolvedReturnType<T[K]>> } => {
   let [args, options] = additional;
 
-  if (options === undefined) {
+  if (options === undefined && args !== undefined) {
     options = args as QueryOptions;
     args = undefined;
   }
@@ -72,8 +73,14 @@ export const createResourceQuery = <T extends Resource, K extends keyof T>(
         >;
       },
       ..._options,
+      refetchInterval: false,
     })
   );
 
+  usePolling(
+    () => queryOptions.queryKey,
+    () => _options?.refetchInterval ?? false
+  );
+
   return fromStore(createQuery(toStore(() => queryOptions)));
 };

src/lib/hooks/create-robot-query.svelte.ts

@@ -6,6 +6,7 @@ import {
 
 import type { RobotClient } from '@viamrobotics/sdk';
 import { toStore, fromStore } from 'svelte/store';
+import { usePolling } from './use-polling.svelte';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type ArgumentsType<T> = T extends (...args: infer U) => any ? U : never;
@@ -36,7 +37,7 @@ export const createRobotQuery = <T extends RobotClient, K extends keyof T>(
 ): { current: QueryObserverResult<ResolvedReturnType<T[K]>> } => {
   let [args, options] = additional;
 
-  if (options === undefined) {
+  if (options === undefined && args !== undefined) {
     options = args as QueryOptions;
     args = undefined;
   }
@@ -73,8 +74,14 @@ export const createRobotQuery = <T extends RobotClient, K extends keyof T>(
         >;
       },
       ..._options,
+      refetchInterval: false,
     })
   );
 
+  usePolling(
+    () => queryOptions.queryKey,
+    () => _options?.refetchInterval ?? false
+  );
+
   return fromStore(createQuery(toStore(() => queryOptions)));
 };

src/lib/hooks/machine-status.svelte.ts

@@ -8,6 +8,7 @@ import {
 import { getContext, setContext } from 'svelte';
 import type { PartID } from '$lib/part';
 import type { RobotClient } from '@viamrobotics/sdk';
+import { usePolling } from './use-polling.svelte';
 
 const key = Symbol('machine-status-context');
 
@@ -30,13 +31,14 @@ export const provideMachineStatusContext = (refetchInterval: () => number) => {
           'partID',
           partID,
           'robotClient',
-          'machineStatus',
+          'getMachineStatus',
         ],
-        refetchInterval: refetchInterval(),
+        refetchInterval: false,
         queryFn: async (): Promise<MachineStatus> => {
           if (!client) {
             throw new Error('No client');
           }
+
           return client.getMachineStatus();
         },
       });
@@ -55,6 +57,12 @@ export const provideMachineStatusContext = (refetchInterval: () => number) => {
     })
   );
 
+  $effect(() => {
+    for (const option of options) {
+      usePolling(() => option.queryKey, refetchInterval);
+    }
+  });
+
   setContext(key, {
     get current() {
       return queries.current;

src/lib/hooks/resource-names.svelte.ts

@@ -48,6 +48,7 @@ export const provideResourceNamesContext = () => {
           if (!client) {
             throw new Error('No client');
           }
+
           return client.resourceNames();
         },
       });

src/lib/hooks/use-polling.svelte.ts

@@ -0,0 +1,35 @@
+import { useQueryClient } from '@tanstack/svelte-query';
+
+/**
+ * Polls a query at an interval while waiting for
+ * a round trip to conclude before restarting the interval
+ * countdown.
+ *
+ * The result is that if a viam server becomes unresponsive,
+ * requests will not begin to stack, exacerbating issues.
+ */
+export function usePolling(
+  queryKey: () => unknown[],
+  interval: () => number | false
+) {
+  const queryClient = useQueryClient();
+  let timeoutId: ReturnType<typeof setTimeout>;
+
+  $effect(() => {
+    const key = queryKey();
+    const currentInterval = interval();
+
+    if (!currentInterval) {
+      return;
+    }
+
+    const poll = async () => {
+      await queryClient.refetchQueries({ queryKey: key });
+      timeoutId = setTimeout(poll, currentInterval);
+    };
+
+    timeoutId = setTimeout(poll, currentInterval);
+
+    return () => clearTimeout(timeoutId);
+  });
+}