diff --git a/src/tests/usePaginatedQuery.test.js b/src/tests/usePaginatedQuery.test.js index 91afda3f57..422f9e2194 100644 --- a/src/tests/usePaginatedQuery.test.js +++ b/src/tests/usePaginatedQuery.test.js @@ -192,4 +192,39 @@ describe('usePaginatedQuery', () => { rendered.getByText('Data second-search 1') await waitForElement(() => rendered.getByText('Data second-search 2')) }) + + it('should not suspend while fetching the next page', async () => { + function Page() { + const [page, setPage] = React.useState(1) + + const { resolvedData } = usePaginatedQuery( + ['data', { page }], + async (queryName, { page }) => { + await sleep(1) + return page + }, + { + initialData: 0, + suspense: true, + } + ) + + return ( +
+

Data {resolvedData}

+ +
+ ) + } + + // render will throw if Page is suspended + const rendered = render( + + + + ) + + fireEvent.click(rendered.getByText('next')) + await waitForElement(() => rendered.getByText('Data 2')) + }) }) diff --git a/src/usePaginatedQuery.js b/src/usePaginatedQuery.js index 52960a8a3f..6dccecb54b 100644 --- a/src/usePaginatedQuery.js +++ b/src/usePaginatedQuery.js @@ -39,12 +39,14 @@ export function usePaginatedQuery(...args) { status = 'success' } - handleSuspense(query) - - return { + const paginatedQuery = { ...query, resolvedData, latestData, status, } + + handleSuspense(paginatedQuery) + + return paginatedQuery }