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

Author: ymc9

packages/plugins/tanstack-query/package.json

@@ -92,7 +92,7 @@
     },
     "devDependencies": {
         "@tanstack/react-query": "^4.29.7",
-        "@tanstack/react-query-v5": "npm:@tanstack/react-query@^5.0.0",
+        "@tanstack/react-query-v5": "npm:@tanstack/react-query@5.56.x",
         "@tanstack/svelte-query": "^4.29.7",
         "@tanstack/svelte-query-v5": "npm:@tanstack/svelte-query@^5.0.0",
         "@tanstack/vue-query": "^4.37.0",

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/plugin.test.ts

@@ -113,7 +113,7 @@ ${sharedModel}
             {
                 provider: 'postgresql',
                 pushDb: false,
-                extraDependencies: ['[email protected]', '@types/[email protected]', '@tanstack/react-query@^5.0.0'],
+                extraDependencies: ['[email protected]', '@types/[email protected]', '@tanstack/react-query@5.56.x'],
                 copyDependencies: [path.resolve(__dirname, '../dist')],
                 compile: true,
                 extraSourceFiles: [

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');
+        });
+    });
 });

pnpm-lock.yaml

@@ -73,7 +73,7 @@ describe('CLI Plugins Tests', () => {
             '[email protected]',
             'react',
             'swr',
-            '@tanstack/react-query@^5.0.0',
+            '@tanstack/react-query@5.56.x',
             '@trpc/server',
             '@prisma/[email protected]',
             `${path.join(__dirname, '../../../../.build/zenstackhq-language-' + ver + '.tgz')}`,

tests/integration/tests/cli/plugins.test.ts

@@ -19,7 +19,7 @@ describe('Polymorphic Plugin Interaction Test', () => {
         await loadSchema(schema, {
             compile: true,
             copyDependencies: [tanstackPlugin],
-            extraDependencies: ['@tanstack/react-query'],
+            extraDependencies: ['@tanstack/react-query@5.56.x'],
         });
     });