fix: tanstack-query build issues and bugs in optimistic update (#843)

Author: ymc9

packages/plugins/tanstack-query/package.json

@@ -117,6 +117,7 @@
         "svelte": "^4.2.1",
         "swr": "^2.0.3",
         "ts-jest": "^29.0.5",
+        "tsup": "^8.0.0",
         "typescript": "^4.9.4",
         "vue": "^3.3.4"
     }

packages/plugins/tanstack-query/scripts/postbuild.js

@@ -2,6 +2,14 @@
 
 const replace = require('replace-in-file');
 
+// tsup incorrectly resolve to legacy types, make a fix here
+console.log('Replacing @tanstack/react-query-v5/build/legacy/types');
+replace.sync({
+    files: 'dist/runtime-v5/react*(.d.ts|.d.mts)',
+    from: /@tanstack\/react-query-v5\/build\/legacy\/types/g,
+    to: '@tanstack/react-query',
+});
+
 console.log('Replacing @tanstack/react-query-v5');
 replace.sync({
     files: 'dist/runtime-v5/react*(.d.ts|.d.mts|.js|.mjs)',

packages/plugins/tanstack-query/src/runtime-v5/react.ts

@@ -159,7 +159,13 @@ export function useModelMutation<T, R = any, C extends boolean = boolean, Result
                 modelMeta,
                 finalOptions,
                 queryClient.getQueryCache().getAll(),
-                (queryKey, data) => queryClient.setQueryData<unknown>(queryKey, data),
+                (queryKey, data) => {
+                    // update query cache
+                    queryClient.setQueryData<unknown>(queryKey, data);
+                    // cancel on-flight queries to avoid redundant cache updates,
+                    // the settlement of the current mutation will trigger a new revalidation
+                    queryClient.cancelQueries({ queryKey }, { revert: false, silent: true });
+                },
                 invalidateQueries ? (predicate) => queryClient.invalidateQueries({ predicate }) : undefined,
                 logging
             );

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

@@ -246,6 +246,7 @@ export function setupOptimisticUpdate(
     const origOnMutate = options?.onMutate;
     const origOnSettled = options?.onSettled;
 
+    // optimistic update on mutate
     options.onMutate = async (...args: unknown[]) => {
         const [variables] = args;
         await optimisticUpdate(
@@ -260,6 +261,7 @@ export function setupOptimisticUpdate(
         return origOnMutate?.(...args);
     };
 
+    // invalidate on settled
     options.onSettled = async (...args: unknown[]) => {
         if (invalidate) {
             const [, , variables] = args;
@@ -293,11 +295,17 @@ async function optimisticUpdate(
         } = cacheItem;
 
         if (error) {
+            if (logging) {
+                console.warn(`Skipping optimistic update for ${JSON.stringify(queryKey)} due to error:`, error);
+            }
             continue;
         }
 
         const [_, queryModel, queryOp, _queryArgs, { optimisticUpdate }] = queryKey as QueryKey;
         if (!optimisticUpdate) {
+            if (logging) {
+                console.log(`Skipping optimistic update for ${JSON.stringify(queryKey)} due to opt-out`);
+            }
             continue;
         }
 

packages/runtime/src/cross/mutator.ts

@@ -66,18 +66,22 @@ export async function applyMutation(
         },
 
         update: (model, args) => {
-            const r = updateMutate(queryModel, resultData, model, args, modelMeta, logging);
-            if (r) {
-                resultData = r;
-                updated = true;
+            if (model === queryModel) {
+                const r = updateMutate(queryModel, resultData, model, args, modelMeta, logging);
+                if (r) {
+                    resultData = r;
+                    updated = true;
+                }
             }
         },
 
         delete: (model, args) => {
-            const r = deleteMutate(queryModel, resultData, model, args, modelMeta, logging);
-            if (r) {
-                resultData = r;
-                updated = true;
+            if (model === queryModel) {
+                const r = deleteMutate(queryModel, resultData, model, args, modelMeta, logging);
+                if (r) {
+                    resultData = r;
+                    updated = true;
+                }
             }
         },
     });