don't poll when disabled, better error handling

Author: micheal-parks

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

@@ -88,7 +88,7 @@ export const createAppQuery = <T extends AppClient, K extends keyof T>(
 
   usePolling(
     () => queryOptions.queryKey,
-    () => _options?.refetchInterval ?? false
+    () => (queryOptions.enabled ? _options?.refetchInterval : false)
   );
 
   return fromStore(createQuery(toStore(() => queryOptions)));

src/lib/hooks/app/create-data-query.svelte.ts

@@ -88,7 +88,7 @@ export const createDataQuery = <T extends DataClient, K extends keyof T>(
 
   usePolling(
     () => queryOptions.queryKey,
-    () => _options?.refetchInterval ?? false
+    () => (queryOptions.enabled ? _options?.refetchInterval : false)
   );
 
   return fromStore(createQuery(toStore(() => queryOptions)));

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

@@ -96,7 +96,7 @@ export const createResourceQuery = <T extends Resource, K extends keyof T>(
 
   usePolling(
     () => queryOptions.queryKey,
-    () => _options?.refetchInterval ?? false
+    () => (queryOptions.enabled ? _options?.refetchInterval : false)
   );
 
   return fromStore(createQuery(toStore(() => queryOptions)));

src/lib/hooks/create-stream-client.svelte.ts

@@ -15,6 +15,7 @@ export const createStreamClient = (
 ) => {
   const debug = useQueryLogger();
   let mediaStream = $state.raw<MediaStream | null>(null);
+  let error = $state<Error>();
 
   const client = useRobotClient(partID);
   const streamClient = $derived(
@@ -40,7 +41,12 @@ export const createStreamClient = (
   $effect(() => {
     const name = resourceName();
     const client = streamClient;
-    client?.getStream(name);
+    try {
+      client?.getStream(name);
+      error = undefined;
+    } catch (nextError) {
+      error = nextError as Error;
+    }
     return () => client?.remove(name);
   });
 
@@ -124,6 +130,9 @@ export const createStreamClient = (
     get current() {
       return streamClient;
     },
+    get error() {
+      return error;
+    },
     get mediaStream() {
       return mediaStream;
     },

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

@@ -71,7 +71,10 @@ export const provideMachineStatusContext = (refetchInterval: () => number) => {
 
   $effect(() => {
     for (const option of options) {
-      usePolling(() => option.queryKey, refetchInterval);
+      usePolling(
+        () => option.queryKey,
+        () => (option.enabled ? refetchInterval() : false)
+      );
     }
   });
 

src/lib/hooks/robot-clients.svelte.ts

@@ -15,6 +15,7 @@ const dialKey = Symbol('dial-configs-context');
 
 interface ClientContext {
   current: Record<PartID, Client | undefined>;
+  errors: Record<PartID, Error | undefined>;
 }
 
 interface ConnectionStatusContext {
@@ -30,6 +31,7 @@ export const provideRobotClientsContext = (
 ) => {
   const queryClient = useQueryClient();
   const clients = $state<Record<PartID, Client | undefined>>({});
+  const errors = $state<Record<PartID, Error | undefined>>({});
   const connectionStatus = $state<Record<PartID, MachineConnectionEvent>>({});
 
   let lastConfigs: Record<PartID, DialConf | undefined> = {};
@@ -87,7 +89,12 @@ export const provideRobotClientsContext = (
         }
       });
 
-      await client.dial(config);
+      try {
+        await client.dial(config);
+        errors[partID] = undefined;
+      } catch (nextError) {
+        errors[partID] = nextError as Error;
+      }
 
       connectionStatus[partID] = MachineConnectionEvent.CONNECTED;
     } catch (error) {
@@ -98,6 +105,7 @@ export const provideRobotClientsContext = (
 
   $effect(() => {
     const configs = dialConfigs();
+    console.log(configs);
 
     const { added, removed, unchanged } = comparePartIds(
       Object.keys(configs),
@@ -139,6 +147,9 @@ export const provideRobotClientsContext = (
     get current() {
       return clients;
     },
+    get errors() {
+      return errors;
+    },
   });
 
   setContext<ConnectionStatusContext>(connectionKey, {

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

@@ -10,10 +10,11 @@ import { useQueryClient } from '@tanstack/svelte-query';
  */
 export function usePolling(
   queryKey: () => unknown[],
-  interval: () => number | false
+  interval: () => number | false | undefined
 ) {
   const queryClient = useQueryClient();
   let timeoutId: ReturnType<typeof setTimeout>;
+  let active = true;
 
   $effect(() => {
     const key = queryKey();
@@ -23,13 +24,20 @@ export function usePolling(
       return;
     }
 
+    active = true;
+
     const poll = async () => {
+      if (!active) return;
+
       await queryClient.refetchQueries({ queryKey: key });
       timeoutId = setTimeout(poll, currentInterval);
     };
 
     timeoutId = setTimeout(poll, currentInterval);
 
-    return () => clearTimeout(timeoutId);
+    return () => {
+      clearTimeout(timeoutId);
+      active = false;
+    };
   });
 }

src/routes/+layout.svelte

@@ -43,7 +43,10 @@ let { children }: Props = $props();
   {/each}
 </div>
 
-<ViamProvider {dialConfigs}>
+<ViamProvider
+  {dialConfigs}
+  logQueries
+>
   <Parts />
   {@render children()}
   <SvelteQueryDevtools />

src/routes/components/part.svelte

@@ -0,0 +1,16 @@
+<script>
+import { useResourceNames } from '$lib';
+import Base from './base.svelte';
+
+let { partID } = $props();
+
+const bases = useResourceNames(() => partID, 'base');
+$inspect(bases);
+</script>
+
+{#each bases.current as base}
+  <Base
+    name={base.name}
+    {partID}
+  />
+{/each}

src/routes/components/parts.svelte

@@ -7,17 +7,17 @@ import {
   CameraStream,
 } from '$lib';
 import { dialConfigs } from '../configs';
-import Base from './base.svelte';
+import Part from './part.svelte';
 import Version from './version.svelte';
 
 const partIDs = Object.keys(dialConfigs);
 
 let partID = new PersistedState('selected-partID', partIDs[0] ?? '');
 
+$inspect(partID.current);
 const status = useConnectionStatus(() => partID.current);
 const resources = useResourceNames(() => partID.current);
 const cameras = useResourceNames(() => partID.current, 'camera');
-const bases = useResourceNames(() => partID.current, 'base');
 
 let streaming = true;
 </script>
@@ -28,10 +28,17 @@ let streaming = true;
       <button
         class="border p-2"
         class:bg-blue-100={partID.current === id}
-        onclick={() => (partID.current = id)}
+        onclick={() => {
+          console.log('click');
+          partID.current = id;
+        }}
       >
         part {index + 1}
       </button>
+
+      {#if id === partID.current}
+        <Part partID={id} />
+      {/if}
     {/each}
 
     {status.current}
@@ -54,13 +61,6 @@ let streaming = true;
     </ul>
   {/if}
 
-  {#each bases.current as { name } (name)}
-    <Base
-      {name}
-      partID={partID.current}
-    />
-  {/each}
-
   {#each cameras.current as { name } (name)}
     {#if streaming}
       <CameraStream