fix: make sure initial data is used when switching queries (#944)

src/core/queryObserver.ts

@@ -277,9 +277,10 @@ export class QueryObserver<TResult, TError> {
 
     // Remove the initial data when there is an existing query
     // because this data should not be used for a new query
-    const config = prevQuery
-      ? { ...this.config, initialData: undefined }
-      : this.config
+    const config =
+      this.config.keepPreviousData && prevQuery
+        ? { ...this.config, initialData: undefined }
+        : this.config
 
     const newQuery = config.queryCache!.buildQuery(config.queryKey, config)
 

src/react/tests/useQuery.test.tsx

@@ -698,6 +698,38 @@ describe('useQuery', () => {
     consoleMock.mockRestore()
   })
 
+  it('should keep initial stale and initial data when the query key changes', async () => {
+    const key = queryKey()
+    const states: QueryResult<{ count: number }>[] = []
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+      const state = useQuery([key, count], () => ({ count: 10 }), {
+        initialStale: () => false,
+        initialData: () => ({ count }),
+      })
+      states.push(state)
+
+      React.useEffect(() => {
+        setTimeout(() => setCount(1))
+      }, [])
+
+      return null
+    }
+
+    render(<Page />)
+
+    await waitFor(() => expect(states.length).toBe(5))
+
+    expect(states).toMatchObject([
+      { data: { count: 0 } },
+      { data: { count: 0 } },
+      { data: { count: 1 } },
+      { data: { count: 1 } },
+      { data: { count: 10 } },
+    ])
+  })
+
   it('should retry specified number of times', async () => {
     const key = queryKey()
     const consoleMock = mockConsoleError()