Skip to content

Commit dbe3f95

Browse files
sukvvonsukvvon
authored
test(vue-query): replace hardcoded query keys with 'queryKey()' utility (#10417)
1 parent d9384ac commit dbe3f95

14 files changed

+333
-190
lines changed

‎packages/vue-query/src/__tests__/infiniteQueryOptions.test-d.ts‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import { assertType, describe, expectTypeOf, it } from 'vitest'
22
import { dataTagSymbol } from '@tanstack/query-core'
33
import { reactive } from 'vue-demi'
4+
import { queryKey } from '@tanstack/query-test-utils'
45
import { infiniteQueryOptions } from '../infiniteQueryOptions'
56
import { QueryClient } from '../queryClient'
67
import { useInfiniteQuery } from '../useInfiniteQuery'
78
import type { InfiniteData } from '@tanstack/query-core'
89

910
describe('infiniteQueryOptions', () => {
1011
it('should not allow excess properties', () => {
12+
const key = queryKey()
1113
assertType(
1214
infiniteQueryOptions({
13-
queryKey: ['key'],
15+
queryKey: key,
1416
queryFn: () => Promise.resolve('data'),
1517
getNextPageParam: () => 1,
1618
initialPageParam: 1,
@@ -20,8 +22,9 @@ describe('infiniteQueryOptions', () => {
2022
)
2123
})
2224
it('should infer types for callbacks', () => {
25+
const key = queryKey()
2326
infiniteQueryOptions({
24-
queryKey: ['key'],
27+
queryKey: key,
2528
queryFn: () => Promise.resolve('data'),
2629
staleTime: 1000,
2730
getNextPageParam: () => 1,
@@ -32,8 +35,9 @@ describe('infiniteQueryOptions', () => {
3235
})
3336
})
3437
it('should work when passed to useInfiniteQuery', () => {
38+
const key = queryKey()
3539
const options = infiniteQueryOptions({
36-
queryKey: ['key'],
40+
queryKey: key,
3741
queryFn: () => Promise.resolve('string'),
3842
getNextPageParam: () => 1,
3943
initialPageParam: 1,
@@ -46,61 +50,66 @@ describe('infiniteQueryOptions', () => {
4650
>()
4751
})
4852
it('should tag the queryKey with the result type of the QueryFn', () => {
49-
const { queryKey } = infiniteQueryOptions({
50-
queryKey: ['key'],
53+
const key = queryKey()
54+
const { queryKey: tagged } = infiniteQueryOptions({
55+
queryKey: key,
5156
queryFn: () => Promise.resolve('string'),
5257
getNextPageParam: () => 1,
5358
initialPageParam: 1,
5459
})
5560

56-
expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
61+
expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
5762
})
5863
it('should tag the queryKey even if no promise is returned', () => {
59-
const { queryKey } = infiniteQueryOptions({
60-
queryKey: ['key'],
64+
const key = queryKey()
65+
const { queryKey: tagged } = infiniteQueryOptions({
66+
queryKey: key,
6167
queryFn: () => 'string',
6268
getNextPageParam: () => 1,
6369
initialPageParam: 1,
6470
})
6571

66-
expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
72+
expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
6773
})
6874
it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
69-
const { queryKey } = infiniteQueryOptions({
70-
queryKey: ['key'],
75+
const key = queryKey()
76+
const { queryKey: tagged } = infiniteQueryOptions({
77+
queryKey: key,
7178
queryFn: () => Promise.resolve('string'),
7279
select: (data) => data.pages,
7380
getNextPageParam: () => 1,
7481
initialPageParam: 1,
7582
})
7683

77-
expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
84+
expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
7885
})
7986
it('should return the proper type when passed to getQueryData', () => {
80-
const { queryKey } = infiniteQueryOptions({
81-
queryKey: ['key'],
87+
const key = queryKey()
88+
const { queryKey: tagged } = infiniteQueryOptions({
89+
queryKey: key,
8290
queryFn: () => Promise.resolve('string'),
8391
getNextPageParam: () => 1,
8492
initialPageParam: 1,
8593
})
8694

8795
const queryClient = new QueryClient()
88-
const data = queryClient.getQueryData(queryKey)
96+
const data = queryClient.getQueryData(tagged)
8997

9098
expectTypeOf(data).toEqualTypeOf<
9199
InfiniteData<string, unknown> | undefined
92100
>()
93101
})
94102
it('should properly type when passed to setQueryData', () => {
95-
const { queryKey } = infiniteQueryOptions({
96-
queryKey: ['key'],
103+
const key = queryKey()
104+
const { queryKey: tagged } = infiniteQueryOptions({
105+
queryKey: key,
97106
queryFn: () => Promise.resolve('string'),
98107
getNextPageParam: () => 1,
99108
initialPageParam: 1,
100109
})
101110

102111
const queryClient = new QueryClient()
103-
const data = queryClient.setQueryData(queryKey, (prev) => {
112+
const data = queryClient.setQueryData(tagged, (prev) => {
104113
expectTypeOf(prev).toEqualTypeOf<
105114
InfiniteData<string, unknown> | undefined
106115
>()

‎packages/vue-query/src/__tests__/queryClient.test-d.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { assertType, describe, expectTypeOf, it } from 'vitest'
2+
import { queryKey } from '@tanstack/query-test-utils'
23
import { QueryClient } from '../queryClient'
34
import type { DataTag, InfiniteData } from '@tanstack/query-core'
45

@@ -113,8 +114,9 @@ describe('setQueryData', () => {
113114

114115
describe('fetchInfiniteQuery', () => {
115116
it('should allow passing pages', async () => {
117+
const key = queryKey()
116118
const data = await new QueryClient().fetchInfiniteQuery({
117-
queryKey: ['key'],
119+
queryKey: key,
118120
queryFn: () => Promise.resolve('string'),
119121
getNextPageParam: () => 1,
120122
initialPageParam: 1,
@@ -125,9 +127,10 @@ describe('fetchInfiniteQuery', () => {
125127
})
126128

127129
it('should not allow passing getNextPageParam without pages', () => {
130+
const key = queryKey()
128131
assertType<Parameters<QueryClient['fetchInfiniteQuery']>>([
129132
{
130-
queryKey: ['key'],
133+
queryKey: key,
131134
queryFn: () => Promise.resolve('string'),
132135
initialPageParam: 1,
133136
getNextPageParam: () => 1,
@@ -136,10 +139,11 @@ describe('fetchInfiniteQuery', () => {
136139
})
137140

138141
it('should not allow passing pages without getNextPageParam', () => {
142+
const key = queryKey()
139143
assertType<Parameters<QueryClient['fetchInfiniteQuery']>>([
140144
// @ts-expect-error Property 'getNextPageParam' is missing
141145
{
142-
queryKey: ['key'],
146+
queryKey: key,
143147
queryFn: () => Promise.resolve('string'),
144148
initialPageParam: 1,
145149
pages: 5,

‎packages/vue-query/src/__tests__/queryOptions.test-d.ts‎

Lines changed: 47 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
import { assertType, describe, expectTypeOf, it } from 'vitest'
22
import { reactive, ref } from 'vue-demi'
33
import { dataTagSymbol } from '@tanstack/query-core'
4+
import { queryKey } from '@tanstack/query-test-utils'
45
import { QueryClient } from '../queryClient'
56
import { queryOptions } from '../queryOptions'
67
import { useQuery } from '../useQuery'
78

89
describe('queryOptions', () => {
910
it('should not allow excess properties', () => {
11+
const key = queryKey()
1012
assertType(
1113
queryOptions({
12-
queryKey: ['key'],
14+
queryKey: key,
1315
queryFn: () => Promise.resolve(5),
1416
// @ts-expect-error this is a good error, because stallTime does not exist!
1517
stallTime: 1000,
1618
}),
1719
)
1820
})
1921
it('should infer types for callbacks', () => {
22+
const key = queryKey()
2023
queryOptions({
21-
queryKey: ['key'],
24+
queryKey: key,
2225
queryFn: () => Promise.resolve(5),
2326
staleTime: 1000,
2427
select: (data) => {
@@ -27,84 +30,92 @@ describe('queryOptions', () => {
2730
})
2831
})
2932
it('should work when passed to useQuery', () => {
33+
const key = queryKey()
3034
const options = queryOptions({
31-
queryKey: ['key'],
35+
queryKey: key,
3236
queryFn: () => Promise.resolve(5),
3337
})
3438

3539
const { data } = reactive(useQuery(options))
3640
expectTypeOf(data).toEqualTypeOf<number | undefined>()
3741
})
3842
it('should tag the queryKey with the result type of the QueryFn', () => {
39-
const { queryKey } = queryOptions({
40-
queryKey: ['key'],
43+
const key = queryKey()
44+
const { queryKey: tagged } = queryOptions({
45+
queryKey: key,
4146
queryFn: () => Promise.resolve(5),
4247
})
4348

44-
expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
49+
expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf<number>()
4550
})
4651
it('should tag the queryKey even if no promise is returned', () => {
47-
const { queryKey } = queryOptions({
48-
queryKey: ['key'],
52+
const key = queryKey()
53+
const { queryKey: tagged } = queryOptions({
54+
queryKey: key,
4955
queryFn: () => 5,
5056
})
5157

52-
expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
58+
expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf<number>()
5359
})
5460
it('should tag the queryKey with unknown if there is no queryFn', () => {
55-
const { queryKey } = queryOptions({
56-
queryKey: ['key'],
61+
const key = queryKey()
62+
const { queryKey: tagged } = queryOptions({
63+
queryKey: key,
5764
})
5865

59-
expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<unknown>()
66+
expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf<unknown>()
6067
})
6168
it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
62-
const { queryKey } = queryOptions({
63-
queryKey: ['key'],
69+
const key = queryKey()
70+
const { queryKey: tagged } = queryOptions({
71+
queryKey: key,
6472
queryFn: () => Promise.resolve(5),
6573
select: (data) => data.toString(),
6674
})
6775

68-
expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
76+
expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf<number>()
6977
})
7078
it('should return the proper type when passed to getQueryData', () => {
71-
const { queryKey } = queryOptions({
72-
queryKey: ['key'],
79+
const key = queryKey()
80+
const { queryKey: tagged } = queryOptions({
81+
queryKey: key,
7382
queryFn: () => Promise.resolve(5),
7483
})
7584

7685
const queryClient = new QueryClient()
77-
const data = queryClient.getQueryData(queryKey)
86+
const data = queryClient.getQueryData(tagged)
7887

7988
expectTypeOf(data).toEqualTypeOf<number | undefined>()
8089
})
8190
it('should properly type updaterFn when passed to setQueryData', () => {
82-
const { queryKey } = queryOptions({
83-
queryKey: ['key'],
91+
const key = queryKey()
92+
const { queryKey: tagged } = queryOptions({
93+
queryKey: key,
8494
queryFn: () => Promise.resolve(5),
8595
})
8696

8797
const queryClient = new QueryClient()
88-
const data = queryClient.setQueryData(queryKey, (prev) => {
98+
const data = queryClient.setQueryData(tagged, (prev) => {
8999
expectTypeOf(prev).toEqualTypeOf<number | undefined>()
90100
return prev
91101
})
92102
expectTypeOf(data).toEqualTypeOf<number | undefined>()
93103
})
94104
it('should properly type value when passed to setQueryData', () => {
95-
const { queryKey } = queryOptions({
96-
queryKey: ['key'],
105+
const key = queryKey()
106+
const { queryKey: tagged } = queryOptions({
107+
queryKey: key,
97108
queryFn: () => Promise.resolve(5),
98109
})
99110

100111
const queryClient = new QueryClient()
101112

102113
// @ts-expect-error value should be a number
103-
queryClient.setQueryData(queryKey, '5')
114+
queryClient.setQueryData(tagged, '5')
104115
// @ts-expect-error value should be a number
105-
queryClient.setQueryData(queryKey, () => '5')
116+
queryClient.setQueryData(tagged, () => '5')
106117

107-
const data = queryClient.setQueryData(queryKey, 5)
118+
const data = queryClient.setQueryData(tagged, 5)
108119

109120
expectTypeOf(data).toEqualTypeOf<number | undefined>()
110121
})
@@ -126,10 +137,11 @@ describe('queryOptions', () => {
126137
})
127138

128139
it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => {
140+
const key = queryKey()
129141
const { data } = reactive(
130142
useQuery(
131143
queryOptions({
132-
queryKey: ['key'],
144+
queryKey: key,
133145
queryFn: () => {
134146
return {
135147
wow: true,
@@ -146,10 +158,11 @@ describe('queryOptions', () => {
146158
})
147159

148160
it('TData should have undefined in the union when initialData is NOT provided', () => {
161+
const key = queryKey()
149162
const { data } = reactive(
150163
useQuery(
151164
queryOptions({
152-
queryKey: ['key'],
165+
queryKey: key,
153166
queryFn: () => {
154167
return {
155168
wow: true,
@@ -163,10 +176,11 @@ describe('queryOptions', () => {
163176
})
164177

165178
it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
179+
const key = queryKey()
166180
const { data } = reactive(
167181
useQuery(
168182
queryOptions({
169-
queryKey: ['key'],
183+
queryKey: key,
170184
queryFn: () => {
171185
return {
172186
wow: true,
@@ -181,10 +195,11 @@ describe('queryOptions', () => {
181195
})
182196

183197
it('TData should be narrowed after an isSuccess check when initialData is provided as a function which can return undefined', () => {
198+
const key = queryKey()
184199
const { data, isSuccess } = reactive(
185200
useQuery(
186201
queryOptions({
187-
queryKey: ['key'],
202+
queryKey: key,
188203
queryFn: () => {
189204
return {
190205
wow: true,
@@ -201,10 +216,11 @@ describe('queryOptions', () => {
201216
})
202217

203218
it('data should not have undefined when initialData is provided', () => {
219+
const key = queryKey()
204220
const { data } = reactive(
205221
useQuery(
206222
queryOptions({
207-
queryKey: ['query-key'],
223+
queryKey: key,
208224
initialData: 42,
209225
}),
210226
),

0 commit comments

Comments
 (0)