fix(tanstack): make sure vue-query hooks' input is reactive (#1185)

Author: ymc9

packages/plugins/tanstack-query/src/generator.ts

@@ -98,7 +98,7 @@ function generateQueryHook(
         const capOperation = upperCaseFirst(operation);
 
         const argsType = overrideInputType ?? `Prisma.${model}${capOperation}Args`;
-        const inputType = `Prisma.SelectSubset<TArgs, ${argsType}>`;
+        const inputType = makeQueryArgsType(target, argsType);
 
         const infinite = generateMode.includes('Infinite');
         const suspense = generateMode.includes('Suspense');
@@ -589,6 +589,7 @@ function makeBaseImports(target: TargetFramework, version: TanStackVersion) {
             return [
                 `import type { UseMutationOptions, UseQueryOptions, UseInfiniteQueryOptions, InfiniteData } from '@tanstack/vue-query';`,
                 `import { getHooksContext } from '${runtimeImportBase}/${target}';`,
+                `import type { MaybeRefOrGetter, ComputedRef } from 'vue';`,
                 ...shared,
             ];
         }
@@ -608,6 +609,15 @@ function makeBaseImports(target: TargetFramework, version: TanStackVersion) {
     }
 }
 
+function makeQueryArgsType(target: string, argsType: string) {
+    const type = `Prisma.SelectSubset<TArgs, ${argsType}>`;
+    if (target === 'vue') {
+        return `MaybeRefOrGetter<${type}> | ComputedRef<${type}>`;
+    } else {
+        return type;
+    }
+}
+
 function makeQueryOptions(
     target: string,
     returnType: string,
@@ -625,8 +635,12 @@ function makeQueryOptions(
                           suspense ? 'Suspense' : ''
                       }InfiniteQueryOptions<${returnType}, TError, InfiniteData<${dataType}>>, 'queryKey'>`
                 : `Omit<Use${suspense ? 'Suspense' : ''}QueryOptions<${returnType}, TError, ${dataType}>, 'queryKey'>`;
-        case 'vue':
-            return `Omit<Use${infinite ? 'Infinite' : ''}QueryOptions<${returnType}, TError, ${dataType}>, 'queryKey'>`;
+        case 'vue': {
+            const baseOption = `Omit<Use${
+                infinite ? 'Infinite' : ''
+            }QueryOptions<${returnType}, TError, ${dataType}>, 'queryKey'>`;
+            return `MaybeRefOrGetter<${baseOption}> | ComputedRef<${baseOption}>`;
+        }
         case 'svelte':
             return infinite
                 ? version === 'v4'
@@ -644,8 +658,10 @@ function makeMutationOptions(target: string, returnType: string, argsType: strin
     switch (target) {
         case 'react':
             return `UseMutationOptions<${returnType}, DefaultError, ${argsType}>`;
-        case 'vue':
-            return `UseMutationOptions<${returnType}, DefaultError, ${argsType}, unknown>`;
+        case 'vue': {
+            const baseOption = `UseMutationOptions<${returnType}, DefaultError, ${argsType}, unknown>`;
+            return `MaybeRefOrGetter<${baseOption}> | ComputedRef<${baseOption}>`;
+        }
         case 'svelte':
             return `MutationOptions<${returnType}, DefaultError, ${argsType}>`;
         default:

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

@@ -5,12 +5,13 @@ import {
     useMutation,
     useQuery,
     useQueryClient,
+    type QueryKey,
     type UseInfiniteQueryOptions,
     type UseMutationOptions,
     type UseQueryOptions,
 } from '@tanstack/vue-query';
 import type { ModelMeta } from '@zenstackhq/runtime/cross';
-import { inject, provide } from 'vue';
+import { computed, inject, provide, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue';
 import {
     APIContext,
     DEFAULT_QUERY_ENDPOINT,
@@ -60,17 +61,25 @@ export function getHooksContext() {
 export function useModelQuery<TQueryFnData, TData, TError>(
     model: string,
     url: string,
-    args?: unknown,
-    options?: Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>,
+    args?: MaybeRefOrGetter<unknown> | ComputedRef<unknown>,
+    options?:
+        | MaybeRefOrGetter<Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>>
+        | ComputedRef<Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>>,
     fetch?: FetchFn,
     optimisticUpdate = false
 ) {
-    const reqUrl = makeUrl(url, args);
-    return useQuery<TQueryFnData, TError, TData>({
-        queryKey: getQueryKey(model, url, args, false, optimisticUpdate),
-        queryFn: () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false),
-        ...options,
+    const queryOptions = computed(() => {
+        return {
+            queryKey: getQueryKey(model, url, toValue(args), false, optimisticUpdate),
+            queryFn: ({ queryKey }: { queryKey: QueryKey }) => {
+                const [_prefix, _model, _op, args] = queryKey;
+                const reqUrl = makeUrl(url, toValue(args));
+                return fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false);
+            },
+            ...toValue(options),
+        };
     });
+    return useQuery<TQueryFnData, TError, TData>(queryOptions);
 }
 
 /**
@@ -86,17 +95,24 @@ export function useModelQuery<TQueryFnData, TData, TError>(
 export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
     model: string,
     url: string,
-    args?: unknown,
-    options?: Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>,
+    args?: MaybeRefOrGetter<unknown> | ComputedRef<unknown>,
+    options?:
+        | MaybeRefOrGetter<Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>>
+        | ComputedRef<Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>>,
     fetch?: FetchFn
 ) {
-    return useInfiniteQuery<TQueryFnData, TError, TData>({
-        queryKey: getQueryKey(model, url, args, true),
-        queryFn: ({ pageParam }) => {
-            return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
+    // CHECKME: vue-query's `useInfiniteQuery`'s input typing seems wrong
+    const queryOptions: any = computed(() => ({
+        queryKey: getQueryKey(model, url, toValue(args), true),
+        queryFn: ({ queryKey, pageParam }: { queryKey: QueryKey; pageParam?: unknown }) => {
+            const [_prefix, _model, _op, args] = queryKey;
+            const reqUrl = makeUrl(url, pageParam ?? toValue(args));
+            return fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false);
         },
-        ...options,
-    });
+        ...toValue(options),
+    }));
+
+    return useInfiniteQuery<TQueryFnData, TError, TData>(queryOptions);
 }
 
 /**
@@ -124,7 +140,9 @@ export function useModelMutation<
     method: 'POST' | 'PUT' | 'DELETE',
     url: string,
     modelMeta: ModelMeta,
-    options?: Omit<UseMutationOptions<Result, TError, TArgs, unknown>, 'mutationFn'>,
+    options?:
+        | MaybeRefOrGetter<Omit<UseMutationOptions<Result, TError, TArgs, unknown>, 'mutationFn'>>
+        | ComputedRef<Omit<UseMutationOptions<Result, TError, TArgs, unknown>, 'mutationFn'>>,
     fetch?: FetchFn,
     invalidateQueries = true,
     checkReadBack?: C,
@@ -146,7 +164,7 @@ export function useModelMutation<
     };
 
     // TODO: figure out the typing problem
-    const finalOptions: any = { ...options, mutationFn };
+    const finalOptions: any = computed(() => ({ ...toValue(options), mutationFn }));
     const operation = url.split('/').pop();
     if (operation) {
         const { logging } = getHooksContext();
@@ -155,7 +173,7 @@ export function useModelMutation<
                 model,
                 operation,
                 modelMeta,
-                finalOptions,
+                toValue(finalOptions),
                 (predicate) => queryClient.invalidateQueries({ predicate }),
                 logging
             );
@@ -166,7 +184,7 @@ export function useModelMutation<
                 model,
                 operation,
                 modelMeta,
-                finalOptions,
+                toValue(finalOptions),
                 queryClient.getQueryCache().getAll(),
                 (queryKey, data) => queryClient.setQueryData<unknown>(queryKey, data),
                 invalidateQueries ? (predicate) => queryClient.invalidateQueries({ predicate }) : undefined,