fix(tanstack-query): non-zenstack queries are accidentally visited during optimistic update

Fixes #1774

Author: ymc9

packages/plugins/tanstack-query/src/runtime/common.ts

@@ -385,15 +385,20 @@ async function optimisticUpdate(
             state: { data, error },
         } = cacheItem;
 
+        if (!isZenStackQueryKey(queryKey)) {
+            // skip non-zenstack queries
+            continue;
+        }
+
         if (error) {
             if (logging) {
                 console.warn(`Skipping optimistic update for ${JSON.stringify(queryKey)} due to error:`, error);
             }
             continue;
         }
 
-        const [_, queryModel, queryOperation, queryArgs, { optimisticUpdate }] = queryKey as QueryKey;
-        if (!optimisticUpdate) {
+        const [_, queryModel, queryOperation, queryArgs, queryOptions] = queryKey;
+        if (!queryOptions?.optimisticUpdate) {
             if (logging) {
                 console.log(`Skipping optimistic update for ${JSON.stringify(queryKey)} due to opt-out`);
             }
@@ -450,3 +455,15 @@ async function optimisticUpdate(
         }
     }
 }
+
+function isZenStackQueryKey(queryKey: readonly unknown[]): queryKey is QueryKey {
+    if (queryKey.length < 5) {
+        return false;
+    }
+
+    if (queryKey[0] !== QUERY_KEY_PREFIX) {
+        return false;
+    }
+
+    return true;
+}

packages/plugins/tanstack-query/tests/react-hooks-v5.test.tsx

@@ -3,7 +3,7 @@
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query-v5';
+import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query-v5';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import nock from 'nock';
 import React from 'react';
@@ -863,4 +863,69 @@ describe('Tanstack Query React Hooks V5 Test', () => {
             expect(cacheData[0].name).toBe('foohooray');
         });
     });
+
+    it('optimistic update mixed with non-zenstack queries', async () => {
+        const { queryClient, wrapper } = createWrapper();
+
+        // non-zenstack query
+        const { result: myQueryResult } = renderHook(
+            () => useQuery({ queryKey: ['myQuery'], queryFn: () => ({ data: 'myData' }) }),
+            {
+                wrapper,
+            }
+        );
+        await waitFor(() => {
+            expect(myQueryResult.current.data).toEqual({ data: 'myData' });
+        });
+
+        const data: any[] = [];
+
+        nock(makeUrl('User', 'findMany'))
+            .get(/.*/)
+            .reply(200, () => {
+                console.log('Querying data:', JSON.stringify(data));
+                return { data };
+            })
+            .persist();
+
+        const { result } = renderHook(
+            () => useModelQuery('User', makeUrl('User', 'findMany'), undefined, { optimisticUpdate: true }),
+            {
+                wrapper,
+            }
+        );
+        await waitFor(() => {
+            expect(result.current.data).toHaveLength(0);
+        });
+
+        nock(makeUrl('User', 'create'))
+            .post(/.*/)
+            .reply(200, () => {
+                console.log('Not mutating data');
+                return { data: null };
+            });
+
+        const { result: mutationResult } = renderHook(
+            () =>
+                useModelMutation('User', 'POST', makeUrl('User', 'create'), modelMeta, {
+                    optimisticUpdate: true,
+                    invalidateQueries: false,
+                }),
+            {
+                wrapper,
+            }
+        );
+
+        act(() => mutationResult.current.mutate({ data: { name: 'foo' } }));
+
+        await waitFor(() => {
+            const cacheData: any = queryClient.getQueryData(
+                getQueryKey('User', 'findMany', undefined, { infinite: false, optimisticUpdate: true })
+            );
+            expect(cacheData).toHaveLength(1);
+            expect(cacheData[0].$optimistic).toBe(true);
+            expect(cacheData[0].id).toBeTruthy();
+            expect(cacheData[0].name).toBe('foo');
+        });
+    });
 });