fix(react-query): remove placeholderData from suspense query (#6973)

Co-authored-by: Huang Jingzhan <huangjz@sea.com>
TanStack · Feb 27, 2024 · d82c83e · d82c83e
1 parent 55782ae
commit d82c83e
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 0 deletions.
diff --git a/packages/react-query/src/__tests__/suspense.test.tsx b/packages/react-query/src/__tests__/suspense.test.tsx
@@ -779,6 +779,58 @@ describe('useSuspenseQuery', () => {
 
     consoleMock.mockRestore()
   })
+
+  it('should still suspense if queryClient has placeholderData config', async () => {
+    const key = queryKey()
+    const queryClientWithPlaceholder = createQueryClient({
+      defaultOptions: {
+        queries: {
+          placeholderData: (previousData: any) => previousData,
+        },
+      },
+    })
+    const states: Array<UseSuspenseQueryResult<number>> = []
+
+    let count = 0
+    let renders = 0
+
+    function Page() {
+      renders++
+
+      const [stateKey, setStateKey] = React.useState(key)
+
+      const state = useSuspenseQuery({
+        queryKey: stateKey,
+        queryFn: async () => {
+          count++
+          await sleep(100)
+          return count
+        },
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <button aria-label="toggle" onClick={() => setStateKey(queryKey())} />
+          data: {String(state.data)}
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClientWithPlaceholder,
+      <React.Suspense fallback="loading">
+        <Page />
+      </React.Suspense>,
+    )
+    await waitFor(() => rendered.getByText('loading'))
+    await waitFor(() => rendered.getByText('data: 1'))
+    fireEvent.click(rendered.getByLabelText('toggle'))
+
+    await waitFor(() => rendered.getByText('loading'))
+    await waitFor(() => rendered.getByText('data: 2'))
+  })
 })
 
 describe('useSuspenseQueries', () => {
@@ -1090,4 +1142,54 @@ describe('useSuspenseQueries', () => {
 
     expect(queryFnCount).toBe(2)
   })
+
+  it('should still suspense if queryClient has placeholderData config', async () => {
+    const key = queryKey()
+    const queryClientWithPlaceholder = createQueryClient({
+      defaultOptions: {
+        queries: {
+          placeholderData: (previousData: any) => previousData,
+        },
+      },
+    })
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+      const [isPending, startTransition] = React.useTransition()
+      const { data } = useSuspenseQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await sleep(10)
+          return 'data' + count
+        },
+      })
+
+      return (
+        <div>
+          <button onClick={() => startTransition(() => setCount(count + 1))}>
+            inc
+          </button>
+
+          <div>{isPending ? 'Pending...' : String(data)}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClientWithPlaceholder,
+      <React.Suspense fallback={'Loading...'}>
+        <Page />
+      </React.Suspense>,
+    )
+
+    await waitFor(() => rendered.getByText('Loading...'))
+
+    await waitFor(() => rendered.getByText('data0'))
+
+    fireEvent.click(rendered.getByText('inc'))
+
+    await waitFor(() => rendered.getByText('Pending...'))
+
+    await waitFor(() => rendered.getByText('data1'))
+  })
 })
diff --git a/packages/react-query/src/useSuspenseQueries.ts b/packages/react-query/src/useSuspenseQueries.ts
@@ -187,6 +187,7 @@ export function useSuspenseQueries<
         suspense: true,
         throwOnError: defaultThrowOnError,
         enabled: true,
+        placeholderData: undefined,
       })),
     } as any,
     queryClient,

diff --git a/packages/react-query/src/useSuspenseQuery.ts b/packages/react-query/src/useSuspenseQuery.ts
@@ -20,6 +20,7 @@ export function useSuspenseQuery<
       enabled: true,
       suspense: true,
       throwOnError: defaultThrowOnError,
+      placeholderData: undefined,
     },
     QueryObserver,
     queryClient,