Skip to content

Commit 2a26acc

Browse files
sukvvonsukvvon
authored
test({react,preact}-query/useInfiniteQuery): add tests for 'initialData' with a failed refetch and 'skipToken' dependent query (#11419)
* test(preact-query/useInfiniteQuery): add tests for 'initialData' with a failed refetch and 'skipToken' dependent query * test(react-query/useInfiniteQuery): add tests for 'initialData' with a failed refetch and 'skipToken' dependent query
1 parent a3d7ab0 commit 2a26acc

2 files changed

Lines changed: 154 additions & 0 deletions

File tree

‎packages/preact-query/src/__tests__/useInfiniteQuery.test.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
QueryClient,
1010
// QueryClientProvider,
1111
keepPreviousData,
12+
skipToken,
1213
useInfiniteQuery,
1314
} from '..'
1415
import type {
@@ -1205,6 +1206,41 @@ describe('useInfiniteQuery', () => {
12051206
).toBeInTheDocument()
12061207
})
12071208

1209+
it('should keep initialData visible alongside the error when a refetch fails', async () => {
1210+
const key = queryKey()
1211+
const states: Array<UseInfiniteQueryResult<InfiniteData<number>>> = []
1212+
1213+
function Page() {
1214+
const state = useInfiniteQuery({
1215+
queryKey: key,
1216+
queryFn: () =>
1217+
sleep(10).then(() => Promise.reject(new Error('Some error'))),
1218+
initialData: { pages: [1], pageParams: [1] },
1219+
getNextPageParam: (lastPage: number) => lastPage + 1,
1220+
initialPageParam: 0,
1221+
retry: false,
1222+
})
1223+
1224+
states.push(state)
1225+
1226+
return null
1227+
}
1228+
1229+
renderWithClient(queryClient, <Page />)
1230+
1231+
await vi.advanceTimersByTimeAsync(11)
1232+
1233+
expect(states.length).toBe(2)
1234+
expect(states[0]).toMatchObject({
1235+
data: { pages: [1] },
1236+
isError: false,
1237+
})
1238+
expect(states[1]).toMatchObject({
1239+
data: { pages: [1] },
1240+
isError: true,
1241+
})
1242+
})
1243+
12081244
it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
12091245
const key = queryKey()
12101246
const states: Array<UseInfiniteQueryResult<InfiniteData<number>>> = []
@@ -1691,4 +1727,45 @@ describe('useInfiniteQuery', () => {
16911727
await vi.advanceTimersByTimeAsync(11)
16921728
expect(rendered.getByText('data: custom client')).toBeInTheDocument()
16931729
})
1730+
1731+
it('should not fetch when queryFn is skipToken, and fetch once it is replaced', async () => {
1732+
const key = queryKey()
1733+
1734+
function Page() {
1735+
const [postId, setPostId] = useState<string>()
1736+
1737+
const { data, isFetching } = useInfiniteQuery({
1738+
queryKey: key,
1739+
queryFn:
1740+
postId != null
1741+
? ({ pageParam }: { pageParam: number }) =>
1742+
sleep(10).then(() => `comments for ${postId} page ${pageParam}`)
1743+
: skipToken,
1744+
initialPageParam: 0,
1745+
getNextPageParam: () => 12,
1746+
})
1747+
1748+
return (
1749+
<div>
1750+
<div>isFetching: {String(isFetching)}</div>
1751+
<div>pages: {data?.pages.join(', ') ?? 'none'}</div>
1752+
<button onClick={() => setPostId('1')}>set postId</button>
1753+
</div>
1754+
)
1755+
}
1756+
1757+
const rendered = renderWithClient(queryClient, <Page />)
1758+
1759+
expect(rendered.getByText('isFetching: false')).toBeInTheDocument()
1760+
1761+
await vi.advanceTimersByTimeAsync(11)
1762+
expect(rendered.getByText('isFetching: false')).toBeInTheDocument()
1763+
expect(rendered.getByText('pages: none')).toBeInTheDocument()
1764+
1765+
fireEvent.click(rendered.getByRole('button', { name: 'set postId' }))
1766+
await vi.advanceTimersByTimeAsync(11)
1767+
expect(
1768+
rendered.getByText('pages: comments for 1 page 0'),
1769+
).toBeInTheDocument()
1770+
})
16941771
})

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
QueryClient,
99
QueryClientProvider,
1010
keepPreviousData,
11+
skipToken,
1112
useInfiniteQuery,
1213
} from '..'
1314
import { renderWithClient, setActTimeout } from './utils'
@@ -1280,6 +1281,41 @@ describe('useInfiniteQuery', () => {
12801281
}
12811282
})
12821283

1284+
it('should keep initialData visible alongside the error when a refetch fails', async () => {
1285+
const key = queryKey()
1286+
const states: Array<UseInfiniteQueryResult<InfiniteData<number>>> = []
1287+
1288+
function Page() {
1289+
const state = useInfiniteQuery({
1290+
queryKey: key,
1291+
queryFn: () =>
1292+
sleep(10).then(() => Promise.reject(new Error('Some error'))),
1293+
initialData: { pages: [1], pageParams: [1] },
1294+
getNextPageParam: (lastPage: number) => lastPage + 1,
1295+
initialPageParam: 0,
1296+
retry: false,
1297+
})
1298+
1299+
states.push(state)
1300+
1301+
return null
1302+
}
1303+
1304+
renderWithClient(queryClient, <Page />)
1305+
1306+
await vi.advanceTimersByTimeAsync(11)
1307+
1308+
expect(states.length).toBe(2)
1309+
expect(states[0]).toMatchObject({
1310+
data: { pages: [1] },
1311+
isError: false,
1312+
})
1313+
expect(states[1]).toMatchObject({
1314+
data: { pages: [1] },
1315+
isError: true,
1316+
})
1317+
})
1318+
12831319
it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
12841320
const key = queryKey()
12851321
const states: Array<UseInfiniteQueryResult<InfiniteData<number>>> = []
@@ -1767,4 +1803,45 @@ describe('useInfiniteQuery', () => {
17671803
await vi.advanceTimersByTimeAsync(11)
17681804
expect(rendered.getByText('data: custom client')).toBeInTheDocument()
17691805
})
1806+
1807+
it('should not fetch when queryFn is skipToken, and fetch once it is replaced', async () => {
1808+
const key = queryKey()
1809+
1810+
function Page() {
1811+
const [postId, setPostId] = React.useState<string>()
1812+
1813+
const { data, isFetching } = useInfiniteQuery({
1814+
queryKey: key,
1815+
queryFn:
1816+
postId != null
1817+
? ({ pageParam }: { pageParam: number }) =>
1818+
sleep(10).then(() => `comments for ${postId} page ${pageParam}`)
1819+
: skipToken,
1820+
initialPageParam: 0,
1821+
getNextPageParam: () => 12,
1822+
})
1823+
1824+
return (
1825+
<div>
1826+
<div>isFetching: {String(isFetching)}</div>
1827+
<div>pages: {data?.pages.join(', ') ?? 'none'}</div>
1828+
<button onClick={() => setPostId('1')}>set postId</button>
1829+
</div>
1830+
)
1831+
}
1832+
1833+
const rendered = renderWithClient(queryClient, <Page />)
1834+
1835+
expect(rendered.getByText('isFetching: false')).toBeInTheDocument()
1836+
1837+
await vi.advanceTimersByTimeAsync(11)
1838+
expect(rendered.getByText('isFetching: false')).toBeInTheDocument()
1839+
expect(rendered.getByText('pages: none')).toBeInTheDocument()
1840+
1841+
fireEvent.click(rendered.getByRole('button', { name: 'set postId' }))
1842+
await vi.advanceTimersByTimeAsync(11)
1843+
expect(
1844+
rendered.getByText('pages: comments for 1 page 0'),
1845+
).toBeInTheDocument()
1846+
})
17701847
})

0 commit comments

Comments
 (0)