Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Dec 3, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 46 additions & 30 deletions packages/plugins/tanstack-query/src/runtime-v5/react.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}),
};
}

/**
Expand All @@ -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,
}),
};
}

/**
Expand All @@ -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,
}),
};
}

/**
Expand All @@ -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,
}),
};
}

/**
Expand Down
25 changes: 19 additions & 6 deletions packages/plugins/tanstack-query/src/runtime-v5/svelte.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { QueryKey } from '@tanstack/react-query-v5';
import {
createInfiniteQuery,
createMutation,
Expand All @@ -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,
Expand Down Expand Up @@ -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)) {
Expand All @@ -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,
}));
}

/**
Expand All @@ -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 (
Expand All @@ -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> {
Expand Down
51 changes: 28 additions & 23 deletions packages/plugins/tanstack-query/src/runtime-v5/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
useQuery,
useQueryClient,
type InfiniteData,
type QueryKey,
type UseInfiniteQueryOptions,
type UseMutationOptions,
type UseQueryOptions,
Expand Down Expand Up @@ -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) };
}

/**
Expand All @@ -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<
Comment on lines 116 to +119
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Typings for queryOptions May Be Too Broad

The queryOptions variable is typed as any, which can mask potential type errors and reduce the benefits of TypeScript's static typing.

Apply this diff to provide a more specific type:

-const queryOptions: any = computed<
+const queryOptions = computed<
     Omit<UseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey' | 'initialPageParam'>
 >(() => ({
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
) {
// 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<
) {
// CHECKME: vue-query's `useInfiniteQuery`'s input typing seems wrong
const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
const queryOptions = 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) };
}

/**
Expand Down
36 changes: 22 additions & 14 deletions packages/plugins/tanstack-query/src/runtime/react.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}),
};
}

/**
Expand All @@ -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,
}),
};
}

/**
Expand Down
31 changes: 21 additions & 10 deletions packages/plugins/tanstack-query/src/runtime/svelte.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
}));
}

/**
Expand All @@ -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,
}));
}

/**
Expand Down
Loading
Loading