feat(tanstack): return query key and pass in abort signal to fetcher (#…

…1903)
zenstackhq · Dec 3, 2024 · d5c30f9 · d5c30f9
1 parent 6642f33
commit d5c30f9
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 107 deletions.
diff --git a/packages/plugins/tanstack-query/src/runtime-v5/react.ts b/packages/plugins/tanstack-query/src/runtime-v5/react.ts
@@ -68,14 +68,18 @@ export function useModelQuery<TQueryFnData, TData, TError>(
     fetch?: FetchFn
 ) {
     const reqUrl = makeUrl(url, args);
-    return useQuery({
-        queryKey: getQueryKey(model, url, args, {
-            infinite: false,
-            optimisticUpdate: options?.optimisticUpdate !== false,
-        }),
-        queryFn: () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false),
-        ...options,
+    const queryKey = getQueryKey(model, url, args, {
+        infinite: false,
+        optimisticUpdate: options?.optimisticUpdate !== false,
     });
+    return {
+        queryKey,
+        ...useQuery({
+            queryKey,
+            queryFn: ({ signal }) => fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false),
+            ...options,
+        }),
+    };
 }
 
 /**
@@ -96,14 +100,18 @@ export function useSuspenseModelQuery<TQueryFnData, TData, TError>(
     fetch?: FetchFn
 ) {
     const reqUrl = makeUrl(url, args);
-    return useSuspenseQuery({
-        queryKey: getQueryKey(model, url, args, {
-            infinite: false,
-            optimisticUpdate: options?.optimisticUpdate !== false,
-        }),
-        queryFn: () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false),
-        ...options,
+    const queryKey = getQueryKey(model, url, args, {
+        infinite: false,
+        optimisticUpdate: options?.optimisticUpdate !== false,
     });
+    return {
+        queryKey,
+        ...useSuspenseQuery({
+            queryKey,
+            queryFn: ({ signal }) => fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false),
+            ...options,
+        }),
+    };
 }
 
 /**
@@ -123,14 +131,18 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
     options: Omit<UseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey' | 'initialPageParam'>,
     fetch?: FetchFn
 ) {
-    return useInfiniteQuery({
-        queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
-        queryFn: ({ pageParam }) => {
-            return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
-        },
-        initialPageParam: args,
-        ...options,
-    });
+    const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
+    return {
+        queryKey,
+        ...useInfiniteQuery({
+            queryKey,
+            queryFn: ({ pageParam, signal }) => {
+                return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), { signal }, fetch, false);
+            },
+            initialPageParam: args,
+            ...options,
+        }),
+    };
 }
 
 /**
@@ -153,14 +165,18 @@ export function useSuspenseInfiniteModelQuery<TQueryFnData, TData, TError>(
     >,
     fetch?: FetchFn
 ) {
-    return useSuspenseInfiniteQuery({
-        queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
-        queryFn: ({ pageParam }) => {
-            return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
-        },
-        initialPageParam: args,
-        ...options,
-    });
+    const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
+    return {
+        queryKey,
+        ...useSuspenseInfiniteQuery({
+            queryKey,
+            queryFn: ({ pageParam, signal }) => {
+                return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), { signal }, fetch, false);
+            },
+            initialPageParam: args,
+            ...options,
+        }),
+    };
 }
 
 /**

diff --git a/packages/plugins/tanstack-query/src/runtime-v5/svelte.ts b/packages/plugins/tanstack-query/src/runtime-v5/svelte.ts
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { QueryKey } from '@tanstack/react-query-v5';
 import {
     createInfiniteQuery,
     createMutation,
@@ -8,11 +9,12 @@ import {
     type CreateQueryOptions,
     type InfiniteData,
     type MutationOptions,
+    type QueryFunction,
     type StoreOrVal,
 } from '@tanstack/svelte-query-v5';
 import { ModelMeta } from '@zenstackhq/runtime/cross';
 import { getContext, setContext } from 'svelte';
-import { Readable, derived } from 'svelte/store';
+import { derived, Readable } from 'svelte/store';
 import {
     APIContext,
     DEFAULT_QUERY_ENDPOINT,
@@ -71,7 +73,8 @@ export function useModelQuery<TQueryFnData, TData, TError>(
         infinite: false,
         optimisticUpdate: options?.optimisticUpdate !== false,
     });
-    const queryFn = () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false);
+    const queryFn: QueryFunction<TQueryFnData, QueryKey, unknown> = ({ signal }) =>
+        fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false);
 
     let mergedOpt: any;
     if (isStore(options)) {
@@ -91,7 +94,12 @@ export function useModelQuery<TQueryFnData, TData, TError>(
             ...options,
         };
     }
-    return createQuery<TQueryFnData, TError, TData>(mergedOpt);
+
+    const result = createQuery<TQueryFnData, TError, TData>(mergedOpt);
+    return derived(result, (r) => ({
+        queryKey,
+        ...r,
+    }));
 }
 
 /**
@@ -113,8 +121,8 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
     fetch?: FetchFn
 ) {
     const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
-    const queryFn = ({ pageParam }: { pageParam: unknown }) =>
-        fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
+    const queryFn: QueryFunction<TQueryFnData, QueryKey, unknown> = ({ pageParam, signal }) =>
+        fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), { signal }, fetch, false);
 
     let mergedOpt: StoreOrVal<CreateInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>>;
     if (
@@ -140,7 +148,12 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
             ...options,
         };
     }
-    return createInfiniteQuery<TQueryFnData, TError, InfiniteData<TData>>(mergedOpt);
+
+    const result = createInfiniteQuery<TQueryFnData, TError, InfiniteData<TData>>(mergedOpt);
+    return derived(result, (r) => ({
+        queryKey,
+        ...r,
+    }));
 }
 
 function isStore<T>(opt: unknown): opt is Readable<T> {

diff --git a/packages/plugins/tanstack-query/src/runtime-v5/vue.ts b/packages/plugins/tanstack-query/src/runtime-v5/vue.ts
@@ -6,7 +6,6 @@ import {
     useQuery,
     useQueryClient,
     type InfiniteData,
-    type QueryKey,
     type UseInfiniteQueryOptions,
     type UseMutationOptions,
     type UseQueryOptions,
@@ -69,24 +68,27 @@ export function useModelQuery<TQueryFnData, TData, TError>(
         | ComputedRef<Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'> & ExtraQueryOptions>,
     fetch?: FetchFn
 ) {
-    const queryOptions = computed(() => {
-        const optionsValue = toValue<
-            (Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'> & ExtraQueryOptions) | undefined
-        >(options);
-        return {
-            queryKey: getQueryKey(model, url, args, {
-                infinite: false,
-                optimisticUpdate: optionsValue?.optimisticUpdate !== false,
-            }),
-            queryFn: ({ queryKey }: { queryKey: QueryKey }) => {
-                const [_prefix, _model, _op, args] = queryKey;
-                const reqUrl = makeUrl(url, toValue(args));
-                return fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false);
-            },
-            ...optionsValue,
-        };
+    const optionsValue = toValue<
+        (Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'> & ExtraQueryOptions) | undefined
+    >(options);
+    const queryKey = getQueryKey(model, url, args, {
+        infinite: false,
+        optimisticUpdate: optionsValue?.optimisticUpdate !== false,
     });
-    return useQuery<TQueryFnData, TError, TData>(queryOptions);
+    const queryOptions = computed<Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'> & ExtraQueryOptions>(
+        () => {
+            return {
+                queryKey,
+                queryFn: ({ queryKey, signal }) => {
+                    const [_prefix, _model, _op, args] = queryKey;
+                    const reqUrl = makeUrl(url, toValue(args));
+                    return fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false);
+                },
+                ...optionsValue,
+            };
+        }
+    );
+    return { queryKey, ...useQuery<TQueryFnData, TError, TData>(queryOptions) };
 }
 
 /**
@@ -113,18 +115,21 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
     fetch?: FetchFn
 ) {
     // CHECKME: vue-query's `useInfiniteQuery`'s input typing seems wrong
-    const queryOptions: any = computed(() => ({
-        queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
-        queryFn: ({ queryKey, pageParam }: { queryKey: QueryKey; pageParam?: unknown }) => {
+    const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
+    const queryOptions: any = computed<
+        Omit<UseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey' | 'initialPageParam'>
+    >(() => ({
+        queryKey,
+        queryFn: ({ queryKey, pageParam, signal }) => {
             const [_prefix, _model, _op, args] = queryKey;
             const reqUrl = makeUrl(url, pageParam ?? toValue(args));
-            return fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false);
+            return fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false);
         },
         initialPageParam: toValue(args),
         ...toValue(options),
     }));
 
-    return useInfiniteQuery<TQueryFnData, TError, InfiniteData<TData>>(queryOptions);
+    return { queryKey, ...useInfiniteQuery<TQueryFnData, TError, TData>(queryOptions) };
 }
 
 /**

diff --git a/packages/plugins/tanstack-query/src/runtime/react.ts b/packages/plugins/tanstack-query/src/runtime/react.ts
@@ -64,14 +64,18 @@ export function useModelQuery<TQueryFnData, TData, TError>(
     fetch?: FetchFn
 ) {
     const reqUrl = makeUrl(url, args);
-    return useQuery<TQueryFnData, TError, TData>({
-        queryKey: getQueryKey(model, url, args, {
-            infinite: false,
-            optimisticUpdate: options?.optimisticUpdate !== false,
-        }),
-        queryFn: () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false),
-        ...options,
+    const queryKey = getQueryKey(model, url, args, {
+        infinite: false,
+        optimisticUpdate: options?.optimisticUpdate !== false,
     });
+    return {
+        queryKey,
+        ...useQuery<TQueryFnData, TError, TData>({
+            queryKey,
+            queryFn: ({ signal }) => fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false),
+            ...options,
+        }),
+    };
 }
 
 /**
@@ -91,13 +95,17 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
     options?: Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>,
     fetch?: FetchFn
 ) {
-    return useInfiniteQuery<TQueryFnData, TError, TData>({
-        queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
-        queryFn: ({ pageParam }) => {
-            return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
-        },
-        ...options,
-    });
+    const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
+    return {
+        queryKey,
+        ...useInfiniteQuery<TQueryFnData, TError, TData>({
+            queryKey,
+            queryFn: ({ pageParam, signal }) => {
+                return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), { signal }, fetch, false);
+            },
+            ...options,
+        }),
+    };
 }
 
 /**

diff --git a/packages/plugins/tanstack-query/src/runtime/svelte.ts b/packages/plugins/tanstack-query/src/runtime/svelte.ts
@@ -10,6 +10,7 @@ import {
 } from '@tanstack/svelte-query';
 import { ModelMeta } from '@zenstackhq/runtime/cross';
 import { getContext, setContext } from 'svelte';
+import { derived } from 'svelte/store';
 import {
     APIContext,
     DEFAULT_QUERY_ENDPOINT,
@@ -64,14 +65,19 @@ export function useModelQuery<TQueryFnData, TData, TError>(
     fetch?: FetchFn
 ) {
     const reqUrl = makeUrl(url, args);
-    return createQuery<TQueryFnData, TError, TData>({
-        queryKey: getQueryKey(model, url, args, {
-            infinite: false,
-            optimisticUpdate: options?.optimisticUpdate !== false,
-        }),
-        queryFn: () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false),
+    const queryKey = getQueryKey(model, url, args, {
+        infinite: false,
+        optimisticUpdate: options?.optimisticUpdate !== false,
+    });
+    const result = createQuery<TQueryFnData, TError, TData>({
+        queryKey,
+        queryFn: ({ signal }) => fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false),
         ...options,
     });
+    return derived(result, (r) => ({
+        queryKey,
+        ...r,
+    }));
 }
 
 /**
@@ -91,12 +97,17 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
     options?: Omit<CreateInfiniteQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>,
     fetch?: FetchFn
 ) {
-    return createInfiniteQuery<TQueryFnData, TError, TData>({
-        queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
-        queryFn: ({ pageParam }) =>
-            fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false),
+    const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
+    const result = createInfiniteQuery<TQueryFnData, TError, TData>({
+        queryKey,
+        queryFn: ({ pageParam, signal }) =>
+            fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), { signal }, fetch, false),
         ...options,
     });
+    return derived(result, (r) => ({
+        queryKey,
+        ...r,
+    }));
 }
 
 /**