Skip to content

Commit 7c4f518

Browse files
daugvinasrdaugvinasr
committed
fix(vue): unref vue infinite query params
1 parent b917236 commit 7c4f518

14 files changed

Lines changed: 853 additions & 4 deletions

File tree

‎packages/query/src/framework-adapter.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ export interface FrameworkAdapter {
126126
getInfiniteQueryHttpProps(
127127
props: GetterProps,
128128
queryParam: string,
129+
httpClient: OutputHttpClient,
129130
hasMutator: boolean,
130131
): string;
131132

‎packages/query/src/frameworks/angular.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export const createAngularAdapter = ({
8888
getInfiniteQueryHttpProps(
8989
props: GetterProps,
9090
queryParam: string,
91+
_httpClient: OutputHttpClient,
9192
hasMutator: boolean,
9293
): string {
9394
let result = props

‎packages/query/src/frameworks/vue.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,22 @@ export const createVueAdapter = ({
7070
return queryProperties;
7171
},
7272

73-
getInfiniteQueryHttpProps(props: GetterProps, queryParam: string): string {
73+
getInfiniteQueryHttpProps(
74+
props: GetterProps,
75+
queryParam: string,
76+
httpClient: OutputHttpClient,
77+
): string {
7478
return props
7579
.map((param) => {
7680
// Vue does NOT destructure named path params (keeps param.name)
77-
return param.name === 'params'
78-
? `{...unref(params), '${queryParam}': pageParam || unref(params)?.['${queryParam}']}`
81+
if (param.name === 'params') {
82+
return `{...unref(params), '${queryParam}': pageParam || unref(params)?.['${queryParam}']}`;
83+
}
84+
85+
// Fetch-style request functions accept plain values, but axios-style
86+
// accept MaybeRef<T> so they unref MaybeRef values internally.
87+
return httpClient === OutputHttpClient.FETCH
88+
? `unref(${param.name})`
7989
: param.name;
8090
})
8191
.join(',');

‎packages/query/src/query-generator.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,12 @@ const generateQueryImplementation = ({
456456
const hasInfiniteQueryParam = queryParam && queryParams?.schema.name;
457457

458458
const httpFunctionProps = queryParam
459-
? adapter.getInfiniteQueryHttpProps(props, queryParam, !!mutator)
459+
? adapter.getInfiniteQueryHttpProps(
460+
props,
461+
queryParam,
462+
httpClient,
463+
!!mutator,
464+
)
460465
: adapter.getHttpFunctionQueryProps(queryProperties, httpClient, !!mutator);
461466

462467
const definedInitialDataReturnType = adapter.getQueryReturnType({

‎tests/__snapshots__/vue-query/infinite-query-with-built-in-fetch/endpoints.ts‎

Lines changed: 337 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,337 @@
1+
/**
2+
* Generated by orval v8.11.0 🍺
3+
* Do not edit manually.
4+
* Multi query params
5+
* OpenAPI spec version: 1.0.0
6+
*/
7+
import { useInfiniteQuery, useQuery } from '@tanstack/vue-query';
8+
import type {
9+
DataTag,
10+
InfiniteData,
11+
QueryClient,
12+
QueryFunction,
13+
QueryKey,
14+
UseInfiniteQueryOptions,
15+
UseInfiniteQueryReturnType,
16+
UseQueryOptions,
17+
UseQueryReturnType,
18+
} from '@tanstack/vue-query';
19+
20+
import { computed, unref } from 'vue';
21+
import type { MaybeRef } from 'vue';
22+
23+
import type { GetUsersUserIdOrdersParams } from './model';
24+
25+
import { faker } from '@faker-js/faker';
26+
27+
import { HttpResponse, http } from 'msw';
28+
import type { RequestHandlerOptions } from 'msw';
29+
30+
export type getUsersUserIdOrdersResponse200 = {
31+
data: string[];
32+
status: 200;
33+
};
34+
35+
export type getUsersUserIdOrdersResponseSuccess =
36+
getUsersUserIdOrdersResponse200 & {
37+
headers: Headers;
38+
};
39+
export type getUsersUserIdOrdersResponse = getUsersUserIdOrdersResponseSuccess;
40+
41+
export const getGetUsersUserIdOrdersUrl = (
42+
userId: number,
43+
params?: GetUsersUserIdOrdersParams,
44+
) => {
45+
const normalizedParams = new URLSearchParams();
46+
47+
Object.entries(params || {}).forEach(([key, value]) => {
48+
if (value !== undefined) {
49+
normalizedParams.append(key, value === null ? 'null' : String(value));
50+
}
51+
});
52+
53+
const stringifiedParams = normalizedParams.toString();
54+
55+
return stringifiedParams.length > 0
56+
? `/users/${userId}/orders?${stringifiedParams}`
57+
: `/users/${userId}/orders`;
58+
};
59+
60+
/**
61+
* Retrieves a list of orders for a specific user with optional filtering
62+
* @summary Get user orders
63+
*/
64+
export const getUsersUserIdOrders = async (
65+
userId: number,
66+
params?: GetUsersUserIdOrdersParams,
67+
options?: RequestInit,
68+
): Promise<getUsersUserIdOrdersResponse> => {
69+
const res = await fetch(getGetUsersUserIdOrdersUrl(userId, params), {
70+
...options,
71+
method: 'GET',
72+
});
73+
74+
const body = [204, 205, 304].includes(res.status) ? null : await res.text();
75+
76+
const data: getUsersUserIdOrdersResponse['data'] = body
77+
? JSON.parse(body)
78+
: {};
79+
return {
80+
data,
81+
status: res.status,
82+
headers: res.headers,
83+
} as getUsersUserIdOrdersResponse;
84+
};
85+
86+
export const getGetUsersUserIdOrdersInfiniteQueryKey = (
87+
userId: MaybeRef<number>,
88+
params?: MaybeRef<GetUsersUserIdOrdersParams>,
89+
) => {
90+
return [
91+
'infinite',
92+
'users',
93+
userId,
94+
'orders',
95+
...(params ? [params] : []),
96+
] as const;
97+
};
98+
99+
export const getGetUsersUserIdOrdersQueryKey = (
100+
userId: MaybeRef<number>,
101+
params?: MaybeRef<GetUsersUserIdOrdersParams>,
102+
) => {
103+
return ['users', userId, 'orders', ...(params ? [params] : [])] as const;
104+
};
105+
106+
export const getGetUsersUserIdOrdersInfiniteQueryOptions = <
107+
TData = InfiniteData<
108+
Awaited<ReturnType<typeof getUsersUserIdOrders>>,
109+
GetUsersUserIdOrdersParams['limit']
110+
>,
111+
TError = unknown,
112+
>(
113+
userId: MaybeRef<number>,
114+
params?: MaybeRef<GetUsersUserIdOrdersParams>,
115+
options?: {
116+
query?: Partial<
117+
UseInfiniteQueryOptions<
118+
Awaited<ReturnType<typeof getUsersUserIdOrders>>,
119+
TError,
120+
TData,
121+
QueryKey,
122+
GetUsersUserIdOrdersParams['limit']
123+
>
124+
>;
125+
fetch?: RequestInit;
126+
},
127+
) => {
128+
const { query: queryOptions, fetch: fetchOptions } = options ?? {};
129+
130+
const queryKey = getGetUsersUserIdOrdersInfiniteQueryKey(userId, params);
131+
132+
const queryFn: QueryFunction<
133+
Awaited<ReturnType<typeof getUsersUserIdOrders>>,
134+
QueryKey,
135+
GetUsersUserIdOrdersParams['limit']
136+
> = ({ signal, pageParam }) =>
137+
getUsersUserIdOrders(
138+
unref(userId),
139+
{ ...unref(params), limit: pageParam || unref(params)?.['limit'] },
140+
{ signal, ...fetchOptions },
141+
);
142+
143+
return {
144+
queryKey,
145+
queryFn,
146+
enabled: computed(
147+
() => unref(userId) !== null && unref(userId) !== undefined,
148+
),
149+
...queryOptions,
150+
} as UseInfiniteQueryOptions<
151+
Awaited<ReturnType<typeof getUsersUserIdOrders>>,
152+
TError,
153+
TData,
154+
QueryKey,
155+
GetUsersUserIdOrdersParams['limit']
156+
>;
157+
};
158+
159+
export type GetUsersUserIdOrdersInfiniteQueryResult = NonNullable<
160+
Awaited<ReturnType<typeof getUsersUserIdOrders>>
161+
>;
162+
export type GetUsersUserIdOrdersInfiniteQueryError = unknown;
163+
164+
/**
165+
* @summary Get user orders
166+
*/
167+
168+
export function useGetUsersUserIdOrdersInfinite<
169+
TData = InfiniteData<
170+
Awaited<ReturnType<typeof getUsersUserIdOrders>>,
171+
GetUsersUserIdOrdersParams['limit']
172+
>,
173+
TError = unknown,
174+
>(
175+
userId: MaybeRef<number>,
176+
params?: MaybeRef<GetUsersUserIdOrdersParams>,
177+
options?: {
178+
query?: Partial<
179+
UseInfiniteQueryOptions<
180+
Awaited<ReturnType<typeof getUsersUserIdOrders>>,
181+
TError,
182+
TData,
183+
QueryKey,
184+
GetUsersUserIdOrdersParams['limit']
185+
>
186+
>;
187+
fetch?: RequestInit;
188+
},
189+
queryClient?: QueryClient,
190+
): UseInfiniteQueryReturnType<TData, TError> & {
191+
queryKey: DataTag<QueryKey, TData, TError>;
192+
} {
193+
const queryOptions = getGetUsersUserIdOrdersInfiniteQueryOptions(
194+
userId,
195+
params,
196+
options,
197+
);
198+
199+
const query = useInfiniteQuery(
200+
queryOptions,
201+
queryClient,
202+
) as UseInfiniteQueryReturnType<TData, TError> & {
203+
queryKey: DataTag<QueryKey, TData, TError>;
204+
};
205+
206+
query.queryKey = unref(queryOptions).queryKey as DataTag<
207+
QueryKey,
208+
TData,
209+
TError
210+
>;
211+
212+
return query;
213+
}
214+
215+
export const getGetUsersUserIdOrdersQueryOptions = <
216+
TData = Awaited<ReturnType<typeof getUsersUserIdOrders>>,
217+
TError = unknown,
218+
>(
219+
userId: MaybeRef<number>,
220+
params?: MaybeRef<GetUsersUserIdOrdersParams>,
221+
options?: {
222+
query?: Partial<
223+
UseQueryOptions<
224+
Awaited<ReturnType<typeof getUsersUserIdOrders>>,
225+
TError,
226+
TData
227+
>
228+
>;
229+
fetch?: RequestInit;
230+
},
231+
) => {
232+
const { query: queryOptions, fetch: fetchOptions } = options ?? {};
233+
234+
const queryKey = getGetUsersUserIdOrdersQueryKey(userId, params);
235+
236+
const queryFn: QueryFunction<
237+
Awaited<ReturnType<typeof getUsersUserIdOrders>>
238+
> = ({ signal }) =>
239+
getUsersUserIdOrders(unref(userId), unref(params), {
240+
signal,
241+
...fetchOptions,
242+
});
243+
244+
return {
245+
queryKey,
246+
queryFn,
247+
enabled: computed(
248+
() => unref(userId) !== null && unref(userId) !== undefined,
249+
),
250+
...queryOptions,
251+
} as UseQueryOptions<
252+
Awaited<ReturnType<typeof getUsersUserIdOrders>>,
253+
TError,
254+
TData
255+
>;
256+
};
257+
258+
export type GetUsersUserIdOrdersQueryResult = NonNullable<
259+
Awaited<ReturnType<typeof getUsersUserIdOrders>>
260+
>;
261+
export type GetUsersUserIdOrdersQueryError = unknown;
262+
263+
/**
264+
* @summary Get user orders
265+
*/
266+
267+
export function useGetUsersUserIdOrders<
268+
TData = Awaited<ReturnType<typeof getUsersUserIdOrders>>,
269+
TError = unknown,
270+
>(
271+
userId: MaybeRef<number>,
272+
params?: MaybeRef<GetUsersUserIdOrdersParams>,
273+
options?: {
274+
query?: Partial<
275+
UseQueryOptions<
276+
Awaited<ReturnType<typeof getUsersUserIdOrders>>,
277+
TError,
278+
TData
279+
>
280+
>;
281+
fetch?: RequestInit;
282+
},
283+
queryClient?: QueryClient,
284+
): UseQueryReturnType<TData, TError> & {
285+
queryKey: DataTag<QueryKey, TData, TError>;
286+
} {
287+
const queryOptions = getGetUsersUserIdOrdersQueryOptions(
288+
userId,
289+
params,
290+
options,
291+
);
292+
293+
const query = useQuery(queryOptions, queryClient) as UseQueryReturnType<
294+
TData,
295+
TError
296+
> & { queryKey: DataTag<QueryKey, TData, TError> };
297+
298+
query.queryKey = unref(queryOptions).queryKey as DataTag<
299+
QueryKey,
300+
TData,
301+
TError
302+
>;
303+
304+
return query;
305+
}
306+
307+
export const getGetUsersUserIdOrdersResponseMock = (): string[] =>
308+
Array.from({ length: faker.number.int({ min: 1, max: 10 }) }, () =>
309+
faker.word.sample(),
310+
);
311+
312+
export const getGetUsersUserIdOrdersMockHandler = (
313+
overrideResponse?:
314+
| string[]
315+
| ((
316+
info: Parameters<Parameters<typeof http.get>[1]>[0],
317+
) => Promise<string[]> | string[]),
318+
options?: RequestHandlerOptions,
319+
) => {
320+
return http.get(
321+
'*/users/:userId/orders',
322+
async (info: Parameters<Parameters<typeof http.get>[1]>[0]) => {
323+
return HttpResponse.json(
324+
overrideResponse !== undefined
325+
? typeof overrideResponse === 'function'
326+
? await overrideResponse(info)
327+
: overrideResponse
328+
: getGetUsersUserIdOrdersResponseMock(),
329+
{ status: 200 },
330+
);
331+
},
332+
options,
333+
);
334+
};
335+
export const getMultiQueryParamsMock = () => [
336+
getGetUsersUserIdOrdersMockHandler(),
337+
];

0 commit comments

Comments
 (0)