Skip to content

Commit c024eaa

Browse files
sukvvonsukvvon
authored
Merge branch 'main' into test/solid-query-useIsMutating-simplify-queryFn-add-expect-isMutating-state-transtions
2 parents f1149da + fba2c86 commit c024eaa

File tree

11 files changed

+496
-677
lines changed

11 files changed

+496
-677
lines changed

‎examples/react/optimistic-updates-cache/src/pages/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ type Todos = {
2020
ts: number
2121
}
2222

23-
async function fetchTodos(): Promise<Todos> {
24-
const response = await fetch('/api/data')
23+
async function fetchTodos({ signal }: { signal: AbortSignal }): Promise<Todos> {
24+
const response = await fetch('/api/data', { signal })
2525
return await response.json()
2626
}
2727

‎packages/react-query/src/__tests__/HydrationBoundary.test.tsx‎

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,9 @@ describe('React hydration', () => {
5454
</HydrationBoundary>
5555
</QueryClientProvider>,
5656
)
57-
await vi.advanceTimersByTimeAsync(1)
57+
5858
expect(rendered.getByText('stringCached')).toBeInTheDocument()
59-
await vi.advanceTimersByTimeAsync(20)
59+
await vi.advanceTimersByTimeAsync(21)
6060
expect(rendered.getByText('string')).toBeInTheDocument()
6161
queryClient.clear()
6262
})
@@ -89,9 +89,8 @@ describe('React hydration', () => {
8989
</QueryClientProvider>,
9090
)
9191

92-
await vi.advanceTimersByTimeAsync(1)
9392
expect(rendered.getByText('stringCached')).toBeInTheDocument()
94-
await vi.advanceTimersByTimeAsync(20)
93+
await vi.advanceTimersByTimeAsync(21)
9594
expect(rendered.getByText('string')).toBeInTheDocument()
9695

9796
queryClientInner.clear()
@@ -123,9 +122,8 @@ describe('React hydration', () => {
123122
</QueryClientProvider>,
124123
)
125124

126-
await vi.advanceTimersByTimeAsync(1)
127125
expect(rendered.getByText('stringCached')).toBeInTheDocument()
128-
await vi.advanceTimersByTimeAsync(20)
126+
await vi.advanceTimersByTimeAsync(21)
129127
expect(rendered.getByText('string')).toBeInTheDocument()
130128

131129
const intermediateClient = new QueryClient()
@@ -134,7 +132,6 @@ describe('React hydration', () => {
134132
queryKey: ['string'],
135133
queryFn: () => sleep(20).then(() => ['should change']),
136134
})
137-
await vi.advanceTimersByTimeAsync(20)
138135
intermediateClient.prefetchQuery({
139136
queryKey: ['added'],
140137
queryFn: () => sleep(20).then(() => ['added']),
@@ -158,9 +155,9 @@ describe('React hydration', () => {
158155
// New query data should be available immediately
159156
expect(rendered.getByText('added')).toBeInTheDocument()
160157

161-
await vi.advanceTimersByTimeAsync(20)
158+
await vi.advanceTimersByTimeAsync(0)
162159
// After effects phase has had time to run, the observer should have updated
163-
expect(rendered.queryByText('string')).toBeNull()
160+
expect(rendered.queryByText('string')).not.toBeInTheDocument()
164161
expect(rendered.getByText('should change')).toBeInTheDocument()
165162

166163
queryClient.clear()
@@ -196,17 +193,15 @@ describe('React hydration', () => {
196193
</QueryClientProvider>,
197194
)
198195

199-
await vi.advanceTimersByTimeAsync(1)
200196
expect(rendered.getByText('stringCached')).toBeInTheDocument()
201-
await vi.advanceTimersByTimeAsync(20)
197+
await vi.advanceTimersByTimeAsync(21)
202198
expect(rendered.getByText('string')).toBeInTheDocument()
203199

204200
const intermediateClient = new QueryClient()
205201
intermediateClient.prefetchQuery({
206202
queryKey: ['string'],
207203
queryFn: () => sleep(20).then(() => ['should not change']),
208204
})
209-
await vi.advanceTimersByTimeAsync(20)
210205
intermediateClient.prefetchQuery({
211206
queryKey: ['added'],
212207
queryFn: () => sleep(20).then(() => ['added']),
@@ -238,7 +233,7 @@ describe('React hydration', () => {
238233
</React.Suspense>,
239234
)
240235

241-
rendered.getByText('loading')
236+
expect(rendered.getByText('loading')).toBeInTheDocument()
242237
})
243238

244239
React.startTransition(() => {
@@ -253,7 +248,9 @@ describe('React hydration', () => {
253248

254249
// This query existed before the transition so it should stay the same
255250
expect(rendered.getByText('string')).toBeInTheDocument()
256-
expect(rendered.queryByText('should not change')).toBeNull()
251+
expect(
252+
rendered.queryByText('should not change'),
253+
).not.toBeInTheDocument()
257254
// New query data should be available immediately because it was
258255
// hydrated in the previous transition, even though the new dehydrated
259256
// state did not contain it
@@ -263,7 +260,7 @@ describe('React hydration', () => {
263260
await vi.advanceTimersByTimeAsync(20)
264261
// It should stay the same even after effects have had a chance to run
265262
expect(rendered.getByText('string')).toBeInTheDocument()
266-
expect(rendered.queryByText('should not change')).toBeNull()
263+
expect(rendered.queryByText('should not change')).not.toBeInTheDocument()
267264

268265
queryClient.clear()
269266
})
@@ -292,9 +289,8 @@ describe('React hydration', () => {
292289
</QueryClientProvider>,
293290
)
294291

295-
await vi.advanceTimersByTimeAsync(1)
296292
expect(rendered.getByText('stringCached')).toBeInTheDocument()
297-
await vi.advanceTimersByTimeAsync(20)
293+
await vi.advanceTimersByTimeAsync(21)
298294
expect(rendered.getByText('string')).toBeInTheDocument()
299295
const newClientQueryClient = new QueryClient()
300296

@@ -359,7 +355,7 @@ describe('React hydration', () => {
359355
</QueryClientProvider>,
360356
)
361357

362-
await vi.runAllTimersAsync()
358+
await vi.advanceTimersByTimeAsync(0)
363359
expect(hydrateSpy).toHaveBeenCalledTimes(0)
364360

365361
hydrateSpy.mockRestore()
@@ -386,12 +382,11 @@ describe('React hydration', () => {
386382
// For the bug to trigger, there needs to already be a query in the cache,
387383
// with a dataUpdatedAt earlier than the dehydratedAt of the next query
388384
const clientQueryClient = new QueryClient()
389-
await clientQueryClient.prefetchQuery({
385+
clientQueryClient.prefetchQuery({
390386
queryKey: ['promise'],
391-
queryFn: () => 'existing',
387+
queryFn: () => sleep(20).then(() => 'existing'),
392388
})
393-
394-
await vi.advanceTimersByTimeAsync(100)
389+
await vi.advanceTimersByTimeAsync(20)
395390

396391
const prefetchQueryClient = new QueryClient({
397392
defaultOptions: {
@@ -402,10 +397,8 @@ describe('React hydration', () => {
402397
})
403398
prefetchQueryClient.prefetchQuery({
404399
queryKey: ['promise'],
405-
queryFn: async () => {
406-
await sleep(10)
407-
throw new Error('Query failed')
408-
},
400+
queryFn: () =>
401+
sleep(10).then(() => Promise.reject(new Error('Query failed'))),
409402
})
410403

411404
const dehydratedState = dehydrate(prefetchQueryClient)
@@ -422,7 +415,7 @@ describe('React hydration', () => {
422415
function Page() {
423416
const { data } = useQuery({
424417
queryKey: ['promise'],
425-
queryFn: () => sleep(10).then(() => ['new']),
418+
queryFn: () => sleep(20).then(() => ['new']),
426419
})
427420
return (
428421
<div>
@@ -438,9 +431,9 @@ describe('React hydration', () => {
438431
</HydrationBoundary>
439432
</QueryClientProvider>,
440433
)
441-
await vi.advanceTimersByTimeAsync(1)
434+
442435
expect(rendered.getByText('existing')).toBeInTheDocument()
443-
await vi.advanceTimersByTimeAsync(10)
436+
await vi.advanceTimersByTimeAsync(21)
444437
expect(rendered.getByText('new')).toBeInTheDocument()
445438

446439
process.removeListener('unhandledRejection', ignore)

‎packages/react-query/src/__tests__/ssr.test.tsx‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('Server Side Rendering', () => {
2929

3030
it('should not trigger fetch', () => {
3131
const key = queryKey()
32-
const queryFn = vi.fn().mockReturnValue('data')
32+
const queryFn = vi.fn(() => sleep(10).then(() => 'data'))
3333

3434
function Page() {
3535
const query = useQuery({ queryKey: key, queryFn })
@@ -51,6 +51,7 @@ describe('Server Side Rendering', () => {
5151

5252
expect(markup).toContain('status pending')
5353
expect(queryFn).toHaveBeenCalledTimes(0)
54+
5455
queryCache.clear()
5556
})
5657

@@ -59,26 +60,21 @@ describe('Server Side Rendering', () => {
5960

6061
const promise = queryClient.fetchQuery({
6162
queryKey: key,
62-
queryFn: async () => {
63-
await sleep(10)
64-
return 'data'
65-
},
63+
queryFn: () => sleep(10).then(() => 'data'),
6664
})
6765
await vi.advanceTimersByTimeAsync(10)
6866

6967
const data = await promise
7068

7169
expect(data).toBe('data')
7270
expect(queryCache.find({ queryKey: key })?.state.data).toBe('data')
71+
7372
queryCache.clear()
7473
})
7574

7675
it('should return existing data from the cache', async () => {
7776
const key = queryKey()
78-
const queryFn = vi.fn(async () => {
79-
await sleep(10)
80-
return 'data'
81-
})
77+
const queryFn = vi.fn(() => sleep(10).then(() => 'data'))
8278

8379
function Page() {
8480
const query = useQuery({ queryKey: key, queryFn })
@@ -103,6 +99,7 @@ describe('Server Side Rendering', () => {
10399

104100
expect(markup).toContain('status success')
105101
expect(queryFn).toHaveBeenCalledTimes(1)
102+
106103
queryCache.clear()
107104
})
108105

@@ -113,7 +110,7 @@ describe('Server Side Rendering', () => {
113110
const [page, setPage] = React.useState(1)
114111
const { data } = useQuery({
115112
queryKey: [key, page],
116-
queryFn: () => Promise.resolve(page),
113+
queryFn: () => sleep(10).then(() => page),
117114
initialData: 1,
118115
})
119116

@@ -134,15 +131,13 @@ describe('Server Side Rendering', () => {
134131
const keys = queryCache.getAll().map((query) => query.queryKey)
135132

136133
expect(keys).toEqual([[key, 1]])
134+
137135
queryCache.clear()
138136
})
139137

140138
it('useInfiniteQuery should return the correct state', async () => {
141139
const key = queryKey()
142-
const queryFn = vi.fn(async () => {
143-
await sleep(5)
144-
return 'page 1'
145-
})
140+
const queryFn = vi.fn(() => sleep(10).then(() => 'page 1'))
146141

147142
function Page() {
148143
const query = useInfiniteQuery({
@@ -165,7 +160,7 @@ describe('Server Side Rendering', () => {
165160
queryFn,
166161
initialPageParam: 0,
167162
})
168-
await vi.advanceTimersByTimeAsync(5)
163+
await vi.advanceTimersByTimeAsync(10)
169164

170165
const markup = renderToString(
171166
<QueryClientProvider client={queryClient}>
@@ -175,6 +170,7 @@ describe('Server Side Rendering', () => {
175170

176171
expect(markup).toContain('page 1')
177172
expect(queryFn).toHaveBeenCalledTimes(1)
173+
178174
queryCache.clear()
179175
})
180176
})

‎packages/react-query/src/__tests__/suspense.test.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
22
import { act, render } from '@testing-library/react'
33
import { Suspense } from 'react'
4-
import { queryKey } from '@tanstack/query-test-utils'
4+
import { queryKey, sleep } from '@tanstack/query-test-utils'
55
import { QueryClient, QueryClientProvider, useSuspenseQuery } from '..'
66
import type { QueryKey } from '..'
77

@@ -21,10 +21,11 @@ function createTestQuery(options: {
2121
return function TestComponent() {
2222
const { data } = useSuspenseQuery({
2323
queryKey: options.queryKey,
24-
queryFn: () => {
25-
options.fetchCount.count++
26-
return Promise.resolve('data')
27-
},
24+
queryFn: () =>
25+
sleep(10).then(() => {
26+
options.fetchCount.count++
27+
return 'data'
28+
}),
2829
staleTime: options.staleTime,
2930
})
3031
return <div>data: {data}</div>
@@ -60,7 +61,8 @@ describe('Suspense Timer Tests', () => {
6061

6162
const rendered = renderWithSuspense(queryClient, <TestComponent />)
6263

63-
await act(() => vi.advanceTimersByTimeAsync(0))
64+
expect(rendered.getByText('loading')).toBeInTheDocument()
65+
await act(() => vi.advanceTimersByTimeAsync(10))
6466
expect(rendered.getByText('data: data')).toBeInTheDocument()
6567

6668
rendered.rerender(
@@ -85,7 +87,8 @@ describe('Suspense Timer Tests', () => {
8587

8688
const rendered = renderWithSuspense(queryClient, <TestComponent />)
8789

88-
await act(() => vi.advanceTimersByTimeAsync(0))
90+
expect(rendered.getByText('loading')).toBeInTheDocument()
91+
await act(() => vi.advanceTimersByTimeAsync(10))
8992
expect(rendered.getByText('data: data')).toBeInTheDocument()
9093

9194
rendered.rerender(
@@ -110,7 +113,8 @@ describe('Suspense Timer Tests', () => {
110113

111114
const rendered = renderWithSuspense(queryClient, <TestComponent />)
112115

113-
await act(() => vi.advanceTimersByTimeAsync(0))
116+
expect(rendered.getByText('loading')).toBeInTheDocument()
117+
await act(() => vi.advanceTimersByTimeAsync(10))
114118
expect(rendered.getByText('data: data')).toBeInTheDocument()
115119

116120
rendered.rerender(
@@ -135,7 +139,8 @@ describe('Suspense Timer Tests', () => {
135139

136140
const rendered = renderWithSuspense(queryClient, <TestComponent />)
137141

138-
await act(() => vi.advanceTimersByTimeAsync(0))
142+
expect(rendered.getByText('loading')).toBeInTheDocument()
143+
await act(() => vi.advanceTimersByTimeAsync(10))
139144
expect(rendered.getByText('data: data')).toBeInTheDocument()
140145

141146
rendered.rerender(
@@ -160,7 +165,8 @@ describe('Suspense Timer Tests', () => {
160165

161166
const rendered = renderWithSuspense(queryClient, <TestComponent />)
162167

163-
await act(() => vi.advanceTimersByTimeAsync(0))
168+
expect(rendered.getByText('loading')).toBeInTheDocument()
169+
await act(() => vi.advanceTimersByTimeAsync(10))
164170
expect(rendered.getByText('data: data')).toBeInTheDocument()
165171

166172
rendered.rerender(

0 commit comments

Comments
 (0)