diff --git a/src/tests/usePaginatedQuery.test.js b/src/tests/usePaginatedQuery.test.js index ad6c2641ff..2ac4796c72 100644 --- a/src/tests/usePaginatedQuery.test.js +++ b/src/tests/usePaginatedQuery.test.js @@ -47,6 +47,7 @@ describe('usePaginatedQuery', () => { rendered.getByText('Data 2') await waitForElement(() => rendered.getByText('Data 3')) }) + it('should use initialData only on the first page, then use previous page data while fetching the next page', async () => { function Page() { const [page, setPage] = React.useState(1) @@ -54,7 +55,7 @@ describe('usePaginatedQuery', () => { const { resolvedData } = usePaginatedQuery( ['data', { page }], async (queryName, { page }) => { - sleep(1000) + await sleep(1000) return page }, { initialData: 0 } @@ -84,4 +85,40 @@ describe('usePaginatedQuery', () => { rendered.getByText('Data 3') await waitForElement(() => rendered.getByText('Data 4')) }) + + // See https://github.com/tannerlinsley/react-query/issues/169 + it('should not trigger unnecessary loading state', async () => { + function Page() { + const [page, setPage] = React.useState(1) + + const { resolvedData, status } = usePaginatedQuery( + ['data', { page }], + async (queryName, { page }) => { + await sleep(1000) + return page + }, + { initialData: 0 } + ) + + return ( +
+

Data {resolvedData}

+

{status}

+ +
+ ) + } + + const rendered = render() + + rendered.getByText('Data 0') + + fireEvent.click(rendered.getByText('next')) + fireEvent.click(rendered.getByText('next')) + fireEvent.click(rendered.getByText('next')) + + await waitForElement(() => rendered.getByTestId('status')) + expect(rendered.getByTestId('status').textContent).toBe('success') + expect(rendered.getByTestId('status').textContent).not.toBe('loading') + }) })