Skip to content

Commit d5c30f9

Browse files
ymc9ymc9
authored
feat(tanstack): return query key and pass in abort signal to fetcher (#1903)
1 parent 6642f33 commit d5c30f9

File tree

7 files changed

+170
-107
lines changed

7 files changed

+170
-107
lines changed

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

Lines changed: 46 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,18 @@ export function useModelQuery<TQueryFnData, TData, TError>(
6868
fetch?: FetchFn
6969
) {
7070
const reqUrl = makeUrl(url, args);
71-
return useQuery({
72-
queryKey: getQueryKey(model, url, args, {
73-
infinite: false,
74-
optimisticUpdate: options?.optimisticUpdate !== false,
75-
}),
76-
queryFn: () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false),
77-
...options,
71+
const queryKey = getQueryKey(model, url, args, {
72+
infinite: false,
73+
optimisticUpdate: options?.optimisticUpdate !== false,
7874
});
75+
return {
76+
queryKey,
77+
...useQuery({
78+
queryKey,
79+
queryFn: ({ signal }) => fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false),
80+
...options,
81+
}),
82+
};
7983
}
8084

8185
/**
@@ -96,14 +100,18 @@ export function useSuspenseModelQuery<TQueryFnData, TData, TError>(
96100
fetch?: FetchFn
97101
) {
98102
const reqUrl = makeUrl(url, args);
99-
return useSuspenseQuery({
100-
queryKey: getQueryKey(model, url, args, {
101-
infinite: false,
102-
optimisticUpdate: options?.optimisticUpdate !== false,
103-
}),
104-
queryFn: () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false),
105-
...options,
103+
const queryKey = getQueryKey(model, url, args, {
104+
infinite: false,
105+
optimisticUpdate: options?.optimisticUpdate !== false,
106106
});
107+
return {
108+
queryKey,
109+
...useSuspenseQuery({
110+
queryKey,
111+
queryFn: ({ signal }) => fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false),
112+
...options,
113+
}),
114+
};
107115
}
108116

109117
/**
@@ -123,14 +131,18 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
123131
options: Omit<UseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey' | 'initialPageParam'>,
124132
fetch?: FetchFn
125133
) {
126-
return useInfiniteQuery({
127-
queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
128-
queryFn: ({ pageParam }) => {
129-
return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
130-
},
131-
initialPageParam: args,
132-
...options,
133-
});
134+
const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
135+
return {
136+
queryKey,
137+
...useInfiniteQuery({
138+
queryKey,
139+
queryFn: ({ pageParam, signal }) => {
140+
return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), { signal }, fetch, false);
141+
},
142+
initialPageParam: args,
143+
...options,
144+
}),
145+
};
134146
}
135147

136148
/**
@@ -153,14 +165,18 @@ export function useSuspenseInfiniteModelQuery<TQueryFnData, TData, TError>(
153165
>,
154166
fetch?: FetchFn
155167
) {
156-
return useSuspenseInfiniteQuery({
157-
queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
158-
queryFn: ({ pageParam }) => {
159-
return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
160-
},
161-
initialPageParam: args,
162-
...options,
163-
});
168+
const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
169+
return {
170+
queryKey,
171+
...useSuspenseInfiniteQuery({
172+
queryKey,
173+
queryFn: ({ pageParam, signal }) => {
174+
return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), { signal }, fetch, false);
175+
},
176+
initialPageParam: args,
177+
...options,
178+
}),
179+
};
164180
}
165181

166182
/**

‎packages/plugins/tanstack-query/src/runtime-v5/svelte.ts‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import { QueryKey } from '@tanstack/react-query-v5';
23
import {
34
createInfiniteQuery,
45
createMutation,
@@ -8,11 +9,12 @@ import {
89
type CreateQueryOptions,
910
type InfiniteData,
1011
type MutationOptions,
12+
type QueryFunction,
1113
type StoreOrVal,
1214
} from '@tanstack/svelte-query-v5';
1315
import { ModelMeta } from '@zenstackhq/runtime/cross';
1416
import { getContext, setContext } from 'svelte';
15-
import { Readable, derived } from 'svelte/store';
17+
import { derived, Readable } from 'svelte/store';
1618
import {
1719
APIContext,
1820
DEFAULT_QUERY_ENDPOINT,
@@ -71,7 +73,8 @@ export function useModelQuery<TQueryFnData, TData, TError>(
7173
infinite: false,
7274
optimisticUpdate: options?.optimisticUpdate !== false,
7375
});
74-
const queryFn = () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false);
76+
const queryFn: QueryFunction<TQueryFnData, QueryKey, unknown> = ({ signal }) =>
77+
fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false);
7578

7679
let mergedOpt: any;
7780
if (isStore(options)) {
@@ -91,7 +94,12 @@ export function useModelQuery<TQueryFnData, TData, TError>(
9194
...options,
9295
};
9396
}
94-
return createQuery<TQueryFnData, TError, TData>(mergedOpt);
97+
98+
const result = createQuery<TQueryFnData, TError, TData>(mergedOpt);
99+
return derived(result, (r) => ({
100+
queryKey,
101+
...r,
102+
}));
95103
}
96104

97105
/**
@@ -113,8 +121,8 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
113121
fetch?: FetchFn
114122
) {
115123
const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
116-
const queryFn = ({ pageParam }: { pageParam: unknown }) =>
117-
fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
124+
const queryFn: QueryFunction<TQueryFnData, QueryKey, unknown> = ({ pageParam, signal }) =>
125+
fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), { signal }, fetch, false);
118126

119127
let mergedOpt: StoreOrVal<CreateInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>>;
120128
if (
@@ -140,7 +148,12 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
140148
...options,
141149
};
142150
}
143-
return createInfiniteQuery<TQueryFnData, TError, InfiniteData<TData>>(mergedOpt);
151+
152+
const result = createInfiniteQuery<TQueryFnData, TError, InfiniteData<TData>>(mergedOpt);
153+
return derived(result, (r) => ({
154+
queryKey,
155+
...r,
156+
}));
144157
}
145158

146159
function isStore<T>(opt: unknown): opt is Readable<T> {

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

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
useQuery,
77
useQueryClient,
88
type InfiniteData,
9-
type QueryKey,
109
type UseInfiniteQueryOptions,
1110
type UseMutationOptions,
1211
type UseQueryOptions,
@@ -69,24 +68,27 @@ export function useModelQuery<TQueryFnData, TData, TError>(
6968
| ComputedRef<Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'> & ExtraQueryOptions>,
7069
fetch?: FetchFn
7170
) {
72-
const queryOptions = computed(() => {
73-
const optionsValue = toValue<
74-
(Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'> & ExtraQueryOptions) | undefined
75-
>(options);
76-
return {
77-
queryKey: getQueryKey(model, url, args, {
78-
infinite: false,
79-
optimisticUpdate: optionsValue?.optimisticUpdate !== false,
80-
}),
81-
queryFn: ({ queryKey }: { queryKey: QueryKey }) => {
82-
const [_prefix, _model, _op, args] = queryKey;
83-
const reqUrl = makeUrl(url, toValue(args));
84-
return fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false);
85-
},
86-
...optionsValue,
87-
};
71+
const optionsValue = toValue<
72+
(Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'> & ExtraQueryOptions) | undefined
73+
>(options);
74+
const queryKey = getQueryKey(model, url, args, {
75+
infinite: false,
76+
optimisticUpdate: optionsValue?.optimisticUpdate !== false,
8877
});
89-
return useQuery<TQueryFnData, TError, TData>(queryOptions);
78+
const queryOptions = computed<Omit<UseQueryOptions<TQueryFnData, TError, TData>, 'queryKey'> & ExtraQueryOptions>(
79+
() => {
80+
return {
81+
queryKey,
82+
queryFn: ({ queryKey, signal }) => {
83+
const [_prefix, _model, _op, args] = queryKey;
84+
const reqUrl = makeUrl(url, toValue(args));
85+
return fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false);
86+
},
87+
...optionsValue,
88+
};
89+
}
90+
);
91+
return { queryKey, ...useQuery<TQueryFnData, TError, TData>(queryOptions) };
9092
}
9193

9294
/**
@@ -113,18 +115,21 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
113115
fetch?: FetchFn
114116
) {
115117
// CHECKME: vue-query's `useInfiniteQuery`'s input typing seems wrong
116-
const queryOptions: any = computed(() => ({
117-
queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
118-
queryFn: ({ queryKey, pageParam }: { queryKey: QueryKey; pageParam?: unknown }) => {
118+
const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
119+
const queryOptions: any = computed<
120+
Omit<UseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey' | 'initialPageParam'>
121+
>(() => ({
122+
queryKey,
123+
queryFn: ({ queryKey, pageParam, signal }) => {
119124
const [_prefix, _model, _op, args] = queryKey;
120125
const reqUrl = makeUrl(url, pageParam ?? toValue(args));
121-
return fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false);
126+
return fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false);
122127
},
123128
initialPageParam: toValue(args),
124129
...toValue(options),
125130
}));
126131

127-
return useInfiniteQuery<TQueryFnData, TError, InfiniteData<TData>>(queryOptions);
132+
return { queryKey, ...useInfiniteQuery<TQueryFnData, TError, TData>(queryOptions) };
128133
}
129134

130135
/**

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

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,18 @@ export function useModelQuery<TQueryFnData, TData, TError>(
6464
fetch?: FetchFn
6565
) {
6666
const reqUrl = makeUrl(url, args);
67-
return useQuery<TQueryFnData, TError, TData>({
68-
queryKey: getQueryKey(model, url, args, {
69-
infinite: false,
70-
optimisticUpdate: options?.optimisticUpdate !== false,
71-
}),
72-
queryFn: () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false),
73-
...options,
67+
const queryKey = getQueryKey(model, url, args, {
68+
infinite: false,
69+
optimisticUpdate: options?.optimisticUpdate !== false,
7470
});
71+
return {
72+
queryKey,
73+
...useQuery<TQueryFnData, TError, TData>({
74+
queryKey,
75+
queryFn: ({ signal }) => fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false),
76+
...options,
77+
}),
78+
};
7579
}
7680

7781
/**
@@ -91,13 +95,17 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
9195
options?: Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>,
9296
fetch?: FetchFn
9397
) {
94-
return useInfiniteQuery<TQueryFnData, TError, TData>({
95-
queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
96-
queryFn: ({ pageParam }) => {
97-
return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
98-
},
99-
...options,
100-
});
98+
const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
99+
return {
100+
queryKey,
101+
...useInfiniteQuery<TQueryFnData, TError, TData>({
102+
queryKey,
103+
queryFn: ({ pageParam, signal }) => {
104+
return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), { signal }, fetch, false);
105+
},
106+
...options,
107+
}),
108+
};
101109
}
102110

103111
/**

‎packages/plugins/tanstack-query/src/runtime/svelte.ts‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
} from '@tanstack/svelte-query';
1111
import { ModelMeta } from '@zenstackhq/runtime/cross';
1212
import { getContext, setContext } from 'svelte';
13+
import { derived } from 'svelte/store';
1314
import {
1415
APIContext,
1516
DEFAULT_QUERY_ENDPOINT,
@@ -64,14 +65,19 @@ export function useModelQuery<TQueryFnData, TData, TError>(
6465
fetch?: FetchFn
6566
) {
6667
const reqUrl = makeUrl(url, args);
67-
return createQuery<TQueryFnData, TError, TData>({
68-
queryKey: getQueryKey(model, url, args, {
69-
infinite: false,
70-
optimisticUpdate: options?.optimisticUpdate !== false,
71-
}),
72-
queryFn: () => fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false),
68+
const queryKey = getQueryKey(model, url, args, {
69+
infinite: false,
70+
optimisticUpdate: options?.optimisticUpdate !== false,
71+
});
72+
const result = createQuery<TQueryFnData, TError, TData>({
73+
queryKey,
74+
queryFn: ({ signal }) => fetcher<TQueryFnData, false>(reqUrl, { signal }, fetch, false),
7375
...options,
7476
});
77+
return derived(result, (r) => ({
78+
queryKey,
79+
...r,
80+
}));
7581
}
7682

7783
/**
@@ -91,12 +97,17 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
9197
options?: Omit<CreateInfiniteQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>,
9298
fetch?: FetchFn
9399
) {
94-
return createInfiniteQuery<TQueryFnData, TError, TData>({
95-
queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
96-
queryFn: ({ pageParam }) =>
97-
fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false),
100+
const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
101+
const result = createInfiniteQuery<TQueryFnData, TError, TData>({
102+
queryKey,
103+
queryFn: ({ pageParam, signal }) =>
104+
fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), { signal }, fetch, false),
98105
...options,
99106
});
107+
return derived(result, (r) => ({
108+
queryKey,
109+
...r,
110+
}));
100111
}
101112

102113
/**

0 commit comments

Comments
 (0)