fix(vue): useSuspense() works when args change while initial promise is still resolving

Author: ntucker

.changeset/clever-geckos-smash.md

@@ -0,0 +1,5 @@
+---
+'@data-client/vue': patch
+---
+
+Fixed race condition in useSuspense() where args change while initial suspense is not complete

packages/vue/src/__tests__/useSuspense.web.ts

@@ -1,7 +1,11 @@
+import { Endpoint } from '@data-client/endpoint';
 import nock from 'nock';
 import { computed, defineComponent, h, nextTick, reactive } from 'vue';
 
-import { CoolerArticleResource } from '../../../../__tests__/new';
+import {
+  CoolerArticleResource,
+  CoolerArticle,
+} from '../../../../__tests__/new';
 import useSuspense from '../consumers/useSuspense';
 import { renderDataCompose, mountDataClient } from '../test';
 
@@ -289,4 +293,64 @@ describe('vue useSuspense()', () => {
 
     cleanup();
   });
+
+  it('should initiate second fetch when props change even if first promise never resolves', async () => {
+    let fetchInitialCalled = false;
+    let fetchFinalCalled = false;
+    let resolveInitial: ((value: any) => void) | undefined;
+    let resolveFinal: ((value: any) => void) | undefined;
+
+    // Create custom endpoint with controllable promises
+    const ControlledEndpoint = new Endpoint(
+      ({ id }: { id: number }) => {
+        if (id === payload.id) {
+          fetchInitialCalled = true;
+          // Initial fetch - manually controlled
+          return new Promise(resolve => {
+            resolveInitial = resolve;
+          });
+        } else if (id === payload2.id) {
+          fetchFinalCalled = true;
+          // Final fetch - manually controlled
+          return new Promise(resolve => {
+            resolveFinal = resolve;
+          });
+        }
+        throw new Error(`Unexpected id: ${id}`);
+      },
+      { schema: CoolerArticle, name: 'ControlledEndpoint' },
+    );
+
+    const props = reactive({ id: payload.id });
+
+    // Start the composable (don't await yet since initial fetch needs manual resolution)
+    const setupPromise = renderDataCompose(
+      (props: { id: number }) =>
+        useSuspense(
+          ControlledEndpoint,
+          computed(() => ({ id: props.id })),
+        ),
+      { props },
+    );
+
+    // Wait for initial fetch to be called
+    expect(fetchInitialCalled).toBe(true);
+
+    props.id = payload2.id;
+    await nextTick();
+
+    resolveFinal?.(payload2);
+
+    // Resolve the initial fetch so renderDataCompose completes
+    resolveInitial?.(payload);
+
+    const { result, cleanup } = await setupPromise;
+    const articleRef = await result;
+
+    // The data should now be from the final fetch (payload2)
+    expect(articleRef.value?.title).toBe(payload2.title);
+    expect(articleRef.value?.content).toBe(payload2.content);
+
+    cleanup();
+  });
 });

packages/vue/src/consumers/useSuspense.ts

@@ -91,9 +91,6 @@ export default async function useSuspense(
     await controller.fetch(endpoint, ...resolvedArgs.value);
   };
 
-  // Trigger on initial call
-  await maybeFetch();
-
   // Watch for changes to key, expiry, or store state that require refetch
   watch(
     () => {
@@ -120,6 +117,9 @@ export default async function useSuspense(
     { immediate: true },
   );
 
+  // Trigger on initial call
+  await maybeFetch();
+
   // Return readonly computed ref - Vue automatically unwraps in templates and reactive contexts
   return readonly(computed(() => responseMeta.value.data));
 }