Skip to content

Commit 6866f7a

Browse files
manudelimanudeli
committed
refactor(react-query): update infinite query tests and add type checks for useSuspenseInfiniteQuery
- Refactored infinite query tests to use a unified options function. - Added type checks for the new `useSuspenseInfiniteQuery` hook. - Improved test structure for better readability and maintainability.
1 parent 8e281a9 commit 6866f7a

File tree

4 files changed

+348
-80
lines changed

4 files changed

+348
-80
lines changed

‎packages/react-query/src/__tests__/infiniteQueryOptions.types.test.tsx‎

Lines changed: 60 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,23 @@ import {
1111
useSuspenseInfiniteQuery,
1212
} from '../useSuspenseInfiniteQuery'
1313
import { infiniteQueryOptions } from '../infiniteQueryOptions'
14+
import { doNotExecute } from './utils'
1415

1516
const infiniteQuery = {
16-
options1: () =>
17+
options: () =>
1718
infiniteQueryOptions({
1819
queryKey: ['key', 1] as const,
1920
queryFn: () => Promise.resolve({ field: 'success' }),
2021
}),
21-
options2: () =>
22+
optionsWithInitialData: () =>
2223
infiniteQueryOptions({
2324
queryKey: ['key', 2] as const,
2425
queryFn: () => Promise.resolve({ field: 'success' }),
2526
initialData: () => ({ pageParams: [], pages: [{ field: 'success' }] }),
2627
}),
2728
}
2829

29-
const Ex = () => {
30+
const Example = () => {
3031
useInfiniteQuery({
3132
queryKey: ['key', 2] as const,
3233
queryFn: () => Promise.resolve({ field: 'success' }),
@@ -36,63 +37,68 @@ const Ex = () => {
3637

3738
describe('infiniteQueryOptions', () => {
3839
it('should be used with useInfiniteQuery', () => {
39-
const keyFn1Query = useInfiniteQuery(infiniteQuery.options1())
40-
expectTypeOf(keyFn1Query).toEqualTypeOf<
41-
UseInfiniteQueryResult<{ field: string }>
42-
>()
43-
expectTypeOf(keyFn1Query.data).toEqualTypeOf<
44-
InfiniteData<{ field: string }> | undefined
45-
>()
46-
const keyFn1Query_Select = useInfiniteQuery({
47-
...infiniteQuery.options1(),
48-
select: (data) => ({
49-
pages: data.pages.map(({ field }) => field),
50-
pageParams: data.pageParams,
51-
}),
40+
doNotExecute(() => {
41+
const keyFn1Query = useInfiniteQuery(infiniteQuery.options())
42+
expectTypeOf(keyFn1Query).toEqualTypeOf<
43+
UseInfiniteQueryResult<{ field: string }>
44+
>()
45+
expectTypeOf(keyFn1Query.data).toEqualTypeOf<
46+
InfiniteData<{ field: string }> | undefined
47+
>()
48+
const keyFn1Query_Select = useInfiniteQuery({
49+
...infiniteQuery.options(),
50+
select: (data) => ({
51+
pages: data.pages.map(({ field }) => field),
52+
pageParams: data.pageParams,
53+
}),
54+
})
55+
expectTypeOf(keyFn1Query_Select).toEqualTypeOf<
56+
UseInfiniteQueryResult<string>
57+
>()
58+
expectTypeOf(keyFn1Query_Select.data).toEqualTypeOf<
59+
InfiniteData<string> | undefined
60+
>()
5261
})
53-
expectTypeOf(keyFn1Query_Select).toEqualTypeOf<
54-
UseInfiniteQueryResult<string>
55-
>()
56-
expectTypeOf(keyFn1Query_Select.data).toEqualTypeOf<
57-
InfiniteData<string> | undefined
58-
>()
5962
})
6063
it('should be used with useSuspenseInfiniteQuery', () => {
61-
const dd = infiniteQuery.options1()
62-
const keyFn1SuspenseQuery = useSuspenseInfiniteQuery(
63-
infiniteQuery.options1(),
64-
)
65-
expectTypeOf(keyFn1SuspenseQuery).toEqualTypeOf<
66-
UseSuspenseInfiniteQueryResult<{ field: string }>
67-
>()
68-
expectTypeOf(keyFn1SuspenseQuery.data).toEqualTypeOf<
69-
InfiniteData<{ field: string }>
70-
>()
71-
const keyFn1SuspenseQuery_Select = useSuspenseInfiniteQuery({
72-
...infiniteQuery.options1(),
73-
select: (data) => ({
74-
pages: data.pages.map(({ field }) => field),
75-
pageParams: data.pageParams,
76-
}),
64+
doNotExecute(() => {
65+
const keyFn1SuspenseQuery = useSuspenseInfiniteQuery(
66+
infiniteQuery.options(),
67+
)
68+
expectTypeOf(keyFn1SuspenseQuery).toEqualTypeOf<
69+
UseSuspenseInfiniteQueryResult<{ field: string }>
70+
>()
71+
expectTypeOf(keyFn1SuspenseQuery.data).toEqualTypeOf<
72+
InfiniteData<{ field: string }>
73+
>()
74+
const keyFn1SuspenseQuery_Select = useSuspenseInfiniteQuery({
75+
...infiniteQuery.options(),
76+
select: (data) => ({
77+
pages: data.pages.map(({ field }) => field),
78+
pageParams: data.pageParams,
79+
}),
80+
})
81+
expectTypeOf(keyFn1SuspenseQuery_Select).toEqualTypeOf<
82+
UseSuspenseInfiniteQueryResult<string>
83+
>()
84+
expectTypeOf(keyFn1SuspenseQuery_Select.data).toEqualTypeOf<
85+
InfiniteData<string>
86+
>()
7787
})
78-
expectTypeOf(keyFn1SuspenseQuery_Select).toEqualTypeOf<
79-
UseSuspenseInfiniteQueryResult<string>
80-
>()
81-
expectTypeOf(keyFn1SuspenseQuery_Select.data).toEqualTypeOf<
82-
InfiniteData<string>
83-
>()
8488
})
85-
it('should be used with useQueryClient', async () => {
86-
const queryClient = useQueryClient()
89+
it('should be used with useQueryClient', () => {
90+
doNotExecute(async () => {
91+
const queryClient = useQueryClient()
8792

88-
queryClient.invalidateQueries(infiniteQuery.options1())
89-
queryClient.resetQueries(infiniteQuery.options1())
90-
queryClient.removeQueries(infiniteQuery.options1())
91-
queryClient.cancelQueries(infiniteQuery.options1())
92-
queryClient.prefetchQuery(infiniteQuery.options1())
93-
queryClient.refetchQueries(infiniteQuery.options1())
93+
queryClient.invalidateQueries(infiniteQuery.options())
94+
queryClient.resetQueries(infiniteQuery.options())
95+
queryClient.removeQueries(infiniteQuery.options())
96+
queryClient.cancelQueries(infiniteQuery.options())
97+
queryClient.prefetchQuery(infiniteQuery.options())
98+
queryClient.refetchQueries(infiniteQuery.options())
9499

95-
const query1 = await queryClient.fetchQuery(infiniteQuery.options1())
96-
expectTypeOf(query1).toEqualTypeOf<InfiniteData<{ field: string }>>()
100+
const query1 = await queryClient.fetchQuery(infiniteQuery.options())
101+
expectTypeOf(query1).toEqualTypeOf<InfiniteData<{ field: string }>>()
102+
})
97103
})
98104
})

‎packages/react-query/src/__tests__/queryOptions.types.test.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,14 @@ const queryFn = () => Promise.resolve({ field: 'success' })
1919
describe('queryOptions', () => {
2020
it('should be used with useQuery', () => {
2121
doNotExecute(() => {
22-
const dd = useQuery(
23-
queryOptions({
24-
queryKey,
25-
queryFn,
26-
}),
27-
)
28-
expectTypeOf(dd).toEqualTypeOf<UseQueryResult<{ field: string }>>()
22+
expectTypeOf(
23+
useQuery(
24+
queryOptions({
25+
queryKey,
26+
queryFn,
27+
}),
28+
),
29+
).toEqualTypeOf<UseQueryResult<{ field: string }>>()
2930
expectTypeOf(
3031
useQuery({
3132
...queryOptions({

‎packages/react-query/src/__tests__/useSuspenseInfiniteQuery.types.test.tsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { expectTypeOf } from 'expect-type'
2+
import { infiniteQueryOptions, useSuspenseInfiniteQuery } from '..'
3+
import { doNotExecute, sleep } from './utils'
4+
import type { UseSuspenseInfiniteQueryResult } from '../useSuspenseInfiniteQuery'
5+
import type { InfiniteData } from '@tanstack/react-query'
6+
7+
const queryKey = ['key'] as const
8+
const queryFn = () => sleep(10).then(() => ({ text: 'response' }))
9+
10+
describe('useSuspenseInfiniteQuery', () => {
11+
it('type check', () => {
12+
doNotExecute(() => {
13+
// @ts-expect-error no arg
14+
useSuspenseInfiniteQuery()
15+
16+
useSuspenseInfiniteQuery({
17+
queryKey,
18+
queryFn,
19+
// @ts-expect-error no suspense
20+
suspense: boolean,
21+
})
22+
useSuspenseInfiniteQuery({
23+
queryKey,
24+
queryFn,
25+
// @ts-expect-error no useErrorBoundary
26+
useErrorBoundary: boolean,
27+
})
28+
useSuspenseInfiniteQuery({
29+
queryKey,
30+
queryFn,
31+
// @ts-expect-error no enabled
32+
enabled: boolean,
33+
})
34+
useSuspenseInfiniteQuery({
35+
queryKey,
36+
queryFn,
37+
// @ts-expect-error no placeholderData
38+
placeholderData: 'placeholder',
39+
})
40+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
41+
useSuspenseInfiniteQuery({
42+
queryKey,
43+
queryFn,
44+
// @ts-expect-error no isPlaceholderData
45+
}).isPlaceholderData
46+
useSuspenseInfiniteQuery({
47+
queryKey,
48+
queryFn,
49+
//@ts-expect-error no networkMode
50+
networkMode: 'always',
51+
})
52+
53+
const infiniteQuery = useSuspenseInfiniteQuery({ queryKey, queryFn })
54+
expectTypeOf(infiniteQuery).toEqualTypeOf<
55+
UseSuspenseInfiniteQueryResult<{ text: string }>
56+
>()
57+
expectTypeOf(infiniteQuery.data).toEqualTypeOf<
58+
InfiniteData<{ text: string }>
59+
>()
60+
expectTypeOf(infiniteQuery.status).toEqualTypeOf<
61+
'error' | 'loading' | 'success'
62+
>()
63+
64+
const selectedInfiniteQuery = useSuspenseInfiniteQuery({
65+
queryKey,
66+
queryFn,
67+
select: (data) => ({
68+
pages: data.pages.map(({ text }) => text),
69+
pageParams: data.pageParams,
70+
}),
71+
})
72+
expectTypeOf(selectedInfiniteQuery).toEqualTypeOf<
73+
UseSuspenseInfiniteQueryResult<string>
74+
>()
75+
expectTypeOf(selectedInfiniteQuery.data).toEqualTypeOf<
76+
InfiniteData<string>
77+
>()
78+
expectTypeOf(selectedInfiniteQuery.status).toEqualTypeOf<
79+
'error' | 'loading' | 'success'
80+
>()
81+
82+
const options = infiniteQueryOptions({
83+
queryKey,
84+
queryFn,
85+
})
86+
87+
const infiniteQueryWithOptions = useSuspenseInfiniteQuery(options)
88+
expectTypeOf(infiniteQueryWithOptions).toEqualTypeOf<
89+
UseSuspenseInfiniteQueryResult<{ text: string }>
90+
>()
91+
expectTypeOf(infiniteQueryWithOptions.data).toEqualTypeOf<
92+
InfiniteData<{ text: string }>
93+
>()
94+
expectTypeOf(infiniteQueryWithOptions.status).toEqualTypeOf<
95+
'error' | 'loading' | 'success'
96+
>()
97+
98+
const selectedInfiniteQueryWithOptions = useSuspenseInfiniteQuery({
99+
...options,
100+
select: (data) => ({
101+
pages: data.pages.map(({ text }) => text),
102+
pageParams: data.pageParams,
103+
}),
104+
})
105+
expectTypeOf(selectedInfiniteQueryWithOptions).toEqualTypeOf<
106+
UseSuspenseInfiniteQueryResult<string>
107+
>()
108+
expectTypeOf(selectedInfiniteQueryWithOptions.data).toEqualTypeOf<
109+
InfiniteData<string>
110+
>()
111+
expectTypeOf(selectedInfiniteQueryWithOptions.status).toEqualTypeOf<
112+
'error' | 'loading' | 'success'
113+
>()
114+
})
115+
})
116+
})

0 commit comments

Comments
 (0)