fix(preact-query): do not go into optimistic fetching state when not subscribed

.changeset/preact-unsubscribed-optimistic-state.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/preact-query': patch
+---
+
+fix(preact-query): do not go into optimistic fetching state when not subscribed

packages/preact-query/src/__tests__/unsubscribed-optimistic.test.tsx

@@ -0,0 +1,92 @@
+import { queryKey } from '@tanstack/query-test-utils'
+import { fireEvent } from '@testing-library/preact'
+import { useState } from 'preact/hooks'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { QueryCache, QueryClient, useQuery } from '..'
+import { renderWithClient } from './utils'
+
+describe('useQuery unsubscribed optimistic state', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient({ queryCache: new QueryCache() })
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    queryClient.clear()
+    vi.useRealTimers()
+  })
+
+  it('should not show fetching on re-render when unsubscribed', async () => {
+    const key = queryKey()
+    const queryFn = vi.fn(() => Promise.resolve('data'))
+
+    function Page() {
+      const [subscribed, setSubscribed] = useState(true)
+      const [other, setOther] = useState(false)
+      const query = useQuery({
+        queryKey: key,
+        queryFn,
+        subscribed,
+      })
+
+      return (
+        <div>
+          <span>isFetching: {String(query.isFetching)}</span>
+          <span>fetchStatus: {query.fetchStatus}</span>
+          <button onClick={() => setSubscribed(false)}>unsubscribe</button>
+          <button onClick={() => setOther(!other)}>rerender</button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+    await vi.advanceTimersByTimeAsync(0)
+    rendered.getByText('isFetching: false')
+    rendered.getByText('fetchStatus: idle')
+
+    fireEvent.click(rendered.getByRole('button', { name: 'unsubscribe' }))
+    await vi.advanceTimersByTimeAsync(0)
+
+    expect(queryFn).toHaveBeenCalledTimes(1)
+    expect(
+      queryClient.getQueryCache().find({ queryKey: key })!.observers.length,
+    ).toBe(0)
+
+    // re-render while unsubscribed
+    fireEvent.click(rendered.getByRole('button', { name: 'rerender' }))
+    await vi.advanceTimersByTimeAsync(0)
+
+    rendered.getByText('isFetching: false')
+    rendered.getByText('fetchStatus: idle')
+  })
+
+  it('should not show fetching when unsubscribed from the start', async () => {
+    const key = queryKey()
+    const queryFn = vi.fn(() => Promise.resolve('data'))
+
+    function Page() {
+      const query = useQuery({
+        queryKey: key,
+        queryFn,
+        subscribed: false,
+      })
+
+      return (
+        <div>
+          <span>isFetching: {String(query.isFetching)}</span>
+          <span>fetchStatus: {query.fetchStatus}</span>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+    await vi.advanceTimersByTimeAsync(0)
+
+    expect(queryFn).toHaveBeenCalledTimes(0)
+    rendered.getByText('isFetching: false')
+    rendered.getByText('fetchStatus: idle')
+  })
+})

packages/preact-query/src/useBaseQuery.ts

@@ -71,9 +71,12 @@ export function useBaseQuery<
   }
 
   // Make sure results are optimistically set in fetching state before subscribing or updating options
+  const subscribed = options.subscribed !== false
   defaultedOptions._optimisticResults = isRestoring
     ? 'isRestoring'
-    : 'optimistic'
+    : subscribed
+      ? 'optimistic'
+      : undefined
 
   ensureSuspenseTimers(defaultedOptions)
   ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary, query)
@@ -91,7 +94,7 @@ export function useBaseQuery<
   // note: this must be called before useSyncExternalStore
   const result = observer.getOptimisticResult(defaultedOptions)
 
-  const shouldSubscribe = !isRestoring && options.subscribed !== false
+  const shouldSubscribe = !isRestoring && subscribed
   useSyncExternalStore(
     useCallback(
       (onStoreChange) => {