fix(useQuery): apply placeholderData also to disabled queries (TanStack#2541)

Author: TkDodo

src/core/queryObserver.ts

@@ -495,7 +495,7 @@ export class QueryObserver<
     if (
       typeof options.placeholderData !== 'undefined' &&
       typeof data === 'undefined' &&
-      status === 'loading'
+      (status === 'loading' || status === 'idle')
     ) {
       let placeholderData
 

src/core/tests/queryObserver.test.tsx

@@ -473,8 +473,8 @@ describe('queryObserver', () => {
     })
 
     expect(observer.getCurrentResult()).toMatchObject({
-      status: 'idle',
-      data: undefined,
+      status: 'success',
+      data: 'placeholder',
     })
 
     const results: QueryObserverResult<unknown>[] = []

src/react/tests/useQuery.test.tsx

@@ -3489,6 +3489,64 @@ describe('useQuery', () => {
     ])
   })
 
+  it('should use placeholder data even for disabled queries', async () => {
+    const key1 = queryKey()
+
+    const states: { state: UseQueryResult<string>; count: number }[] = []
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+
+      const state = useQuery(key1, () => 'data', {
+        placeholderData: 'placeholder',
+        enabled: count === 0,
+      })
+
+      states.push({ state, count })
+
+      React.useEffect(() => {
+        setCount(1)
+      }, [])
+
+      return (
+        <div>
+          <h2>Data: {state.data}</h2>
+          <div>Status: {state.status}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+    await waitFor(() => rendered.getByText('Data: data'))
+
+    expect(states).toMatchObject([
+      {
+        state: {
+          isSuccess: true,
+          isPlaceholderData: true,
+          data: 'placeholder',
+        },
+        count: 0,
+      },
+      {
+        state: {
+          isSuccess: true,
+          isPlaceholderData: true,
+          data: 'placeholder',
+        },
+        count: 1,
+      },
+      {
+        state: {
+          isSuccess: true,
+          isPlaceholderData: false,
+          data: 'data',
+        },
+        count: 1,
+      },
+    ])
+  })
+
   it('placeholder data should run through select', async () => {
     const key1 = queryKey()