fix(react-query): non continuous suspense with useSuspenseQueries (#6298)

[maciej-baruch]

#6298

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Nov 5, 2023 10:56am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d3acc6f:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[TkDodo]

I had this fix in mind:

Subject: [PATCH] fix: useQueries suspense
---
Index: packages/react-query/src/useQueries.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/packages/react-query/src/useQueries.ts b/packages/react-query/src/useQueries.ts
--- a/packages/react-query/src/useQueries.ts	
+++ b/packages/react-query/src/useQueries.ts	
@@ -1,7 +1,11 @@
 'use client'
 import * as React from 'react'
 
-import { QueriesObserver, notifyManager } from '@tanstack/query-core'
+import {
+  QueriesObserver,
+  QueryObserver,
+  notifyManager,
+} from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
 import { useIsRestoring } from './isRestoring'
 import { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'
@@ -262,9 +266,9 @@
   const suspensePromises = shouldAtLeastOneSuspend
     ? optimisticResult.flatMap((result, index) => {
         const opts = defaultedQueries[index]
-        const queryObserver = observer.getObservers()[index]
 
-        if (opts && queryObserver) {
+        if (opts) {
+          const queryObserver = new QueryObserver(client, opts)
           if (shouldSuspend(opts, result, isRestoring)) {
             return fetchOptimistic(opts, queryObserver, errorResetBoundary)
           } else if (willFetch(result, isRestoring)) {

I think we don't need to use the matching observer on the QueriesObserver - the fetch is fire-and-forget anyways, so I just created a new QueryObserver to do the fetch.

the fetchOptimistic method on the observer is just a small wrapper around query.fetch(), so we technically don't even need it ... but changing that could be considered breaking, so this is the most minimal fix I could find. Can you try if your tests also work with that solution?

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d3acc6f. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx affected --targets=test:eslint,test:lib,test:types,test:build,test:bundle

---

Sent with 💌 from NxCloud.

[maciej-baruch]

Nice and simple.
The tests run, I also fixed the failing eslint checks.

[TkDodo]

There are some warnings with the way the tests are written:

Warning: The current testing environment is not configured to support act(...)

maybe relates to:

• The current testing environment is not configured to support act(...) with vitest and React 18 testing-library/react-testing-library#1061

not sure if we'd need to update testing-library or vitest or both?

Maybe you could also change the tests to be written more like the other tests that we have? We basically don't test hooks, but wrap them in components like so:

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

Lines 123 to 148 in c014ea7

	it('should not call the queryFn twice when used in Suspense mode', async () => {
	const key = queryKey()
	const queryFn = vi.fn<Array<unknown>, string>()
	queryFn.mockImplementation(() => {
	sleep(10)
	return 'data'
	})
	function Page() {
	useSuspenseQuery({ queryKey: [key], queryFn })
	return <>rendered</>
	}
	const rendered = renderWithClient(
	queryClient,
	<React.Suspense fallback="loading">
	<Page />
	</React.Suspense>,
	)
	await waitFor(() => rendered.getByText('rendered'))
	expect(queryFn).toHaveBeenCalledTimes(1)
	})

[maciej-baruch]

Happy to comply.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Files	Coverage Δ
packages/react-query/src/useQueries.ts	87.50% <100.00%> (ø)

... and 67 files with indirect coverage changes

📢 Thoughts on this report? Let us know!.