fix(react-query): keep unsubscribed useQueries idle

Author: ShiroKSH

.changeset/tidy-pandas-wait.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-query': patch
+---
+
+fix(react-query): don't show optimistic fetching for unsubscribed useQueries

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

@@ -63,6 +63,34 @@ describe('useQueries', () => {
     expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }])
   })
 
+  it('should not optimistically show fetching when unsubscribed', () => {
+    const key = queryKey()
+    const queryFn = vi.fn(() => Promise.resolve('data'))
+
+    function Page() {
+      const [query] = useQueries({
+        queries: [{ queryKey: key, queryFn }],
+        subscribed: false,
+      })
+
+      return (
+        <div>
+          <span>isFetching: {String(query.isFetching)}</span>
+          <span>fetchStatus: {query.fetchStatus}</span>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    expect(queryFn).not.toHaveBeenCalled()
+    expect(
+      queryClient.getQueryCache().find({ queryKey: key })!.observers.length,
+    ).toBe(0)
+    rendered.getByText('isFetching: false')
+    rendered.getByText('fetchStatus: idle')
+  })
+
   it('should track results', async () => {
     const key1 = queryKey()
     const results: Array<Array<UseQueryResult>> = []

packages/react-query/src/useQueries.ts

@@ -223,6 +223,7 @@ export function useQueries<
   const client = useQueryClient(queryClient)
   const isRestoring = useIsRestoring()
   const errorResetBoundary = useQueryErrorResetBoundary()
+  const subscribed = options.subscribed !== false
 
   const defaultedQueries = React.useMemo(
     () =>
@@ -234,11 +235,13 @@ export function useQueries<
         // Make sure the results are already in fetching state before subscribing or updating options
         defaultedOptions._optimisticResults = isRestoring
           ? 'isRestoring'
-          : 'optimistic'
+          : subscribed
+            ? 'optimistic'
+            : undefined
 
         return defaultedOptions
       }),
-    [queries, client, isRestoring],
+    [queries, client, isRestoring, subscribed],
   )
 
   defaultedQueries.forEach((queryOptions) => {
@@ -265,7 +268,7 @@ export function useQueries<
       (options as QueriesObserverOptions<TCombinedResult>).combine,
     )
 
-  const shouldSubscribe = !isRestoring && options.subscribed !== false
+  const shouldSubscribe = !isRestoring && subscribed
   React.useSyncExternalStore(
     React.useCallback(
       (onStoreChange) =>