wip

TanStack · Dec 13, 2024 · 46d145c · 46d145c
1 parent 61d9be3
commit 46d145c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 102 deletions.
diff --git a/packages/react-query/src/__tests__/useQuery.promise.test.tsx b/packages/react-query/src/__tests__/useQuery.promise.test.tsx
@@ -1036,7 +1036,7 @@ describe('useQuery().promise', () => {
     expect(queryFn).toHaveBeenCalledTimes(0)
   })
 
-  it.only('should show correct data when switching between cache entries without re-fetches', async () => {
+  it('should show correct data when switching between cache entries without re-fetches', async () => {
     const key = queryKey()
     const renderStream = createRenderStream({ snapshotDOM: true })
 

diff --git a/packages/react-query/src/__tests__/useQuery.test.tsx b/packages/react-query/src/__tests__/useQuery.test.tsx
@@ -1,29 +1,28 @@
-import { dehydrate, hydrate, skipToken } from '@tanstack/query-core'
+import { describe, expect, expectTypeOf, it, test, vi } from 'vitest'
 import { act, fireEvent, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import { describe, expect, expectTypeOf, it, test, vi } from 'vitest'
+import { dehydrate, hydrate, skipToken } from '@tanstack/query-core'
 import { QueryCache, keepPreviousData, useQuery } from '..'
 import {
-  Blink,
   arrayPick,
+  Blink,
   createQueryClient,
   mockOnlineManagerIsOnline,
   mockVisibilityState,
-  pick,
   queryKey,
   renderWithClient,
   setActTimeout,
   sleep,
 } from './utils'
-import type { Mock } from 'vitest'
 import type {
   DefinedUseQueryResult,
   OmitKeyof,
   QueryFunction,
   UseQueryOptions,
   UseQueryResult,
 } from '..'
+import type { Mock } from 'vitest'
 
 describe('useQuery', () => {
   const queryCache = new QueryCache()
@@ -4784,6 +4783,7 @@ describe('useQuery', () => {
             reset
           </button>
           <div>data: {state.data ?? 'null'}</div>
+          <div>isFetching: {state.isFetching}</div>
         </div>
       )
     }
@@ -4799,11 +4799,8 @@ describe('useQuery', () => {
 
     expect(count).toBe(2)
 
-    const pickedStates = states.map((x) =>
-      pick(x, ['data', 'isPending', 'isFetching', 'isSuccess', 'isStale']),
-    )
 
-    expect(pickedStates).toMatchInlineSnapshot(`
+    expect(arrayPick(states, ['data', 'isStale', 'isFetching', 'isPending', 'isSuccess'])).toMatchInlineSnapshot(`
       [
         {
           "data": undefined,
@@ -4821,7 +4818,7 @@ describe('useQuery', () => {
         },
         {
           "data": undefined,
-          "isFetching": false,
+          "isFetching": true,
           "isPending": true,
           "isStale": true,
           "isSuccess": false,
@@ -6244,22 +6241,22 @@ describe('useQuery', () => {
     await waitFor(() => rendered.getByText('Works'))
   })
 
-  it.only('should keep the previous data when placeholderData is set and cache is used', async () => {
+  it('should keep the previous data when placeholderData is set and cache is used', async () => {
     const key = queryKey()
     const states: Array<UseQueryResult<number | undefined>> = []
+    const steps = [0, 1, 0, 2]
 
     function Page() {
       const [count, setCount] = React.useState(0)
 
       const state = useQuery({
         staleTime: Infinity,
-        queryKey: [key, count],
+        queryKey: [key, steps[count]],
         queryFn: async () => {
           await sleep(10)
-          return count
+          return steps[count]
         },
         placeholderData: keepPreviousData,
-        notifyOnChangeProps: 'all',
       })
 
       states.push(state)
@@ -6282,92 +6279,13 @@ describe('useQuery', () => {
 
     fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
 
-    await waitFor(() => rendered.getByText('data: 2'))
+    await waitFor(() => rendered.getByText('data: 0'))
 
     fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
 
-    await waitFor(() => rendered.getByText('data: 3'))
+    await waitFor(() => rendered.getByText('data: 2'))
 
     // Initial
-
-    const pickedStates = arrayPick(states, [
-      'data',
-      'isFetching',
-      'isPlaceholderData',
-      'isSuccess',
-    ])
-
-    expect(pickedStates).toMatchInlineSnapshot(`
-      [
-        {
-          "data": undefined,
-          "isFetching": true,
-          "isPlaceholderData": false,
-          "isSuccess": false,
-        },
-        {
-          "data": 0,
-          "isFetching": false,
-          "isPlaceholderData": false,
-          "isSuccess": true,
-        },
-        {
-          "data": 0,
-          "isFetching": false,
-          "isPlaceholderData": false,
-          "isSuccess": true,
-        },
-        {
-          "data": 0,
-          "isFetching": true,
-          "isPlaceholderData": true,
-          "isSuccess": true,
-        },
-        {
-          "data": 1,
-          "isFetching": false,
-          "isPlaceholderData": false,
-          "isSuccess": true,
-        },
-        {
-          "data": 1,
-          "isFetching": false,
-          "isPlaceholderData": false,
-          "isSuccess": true,
-        },
-        {
-          "data": 1,
-          "isFetching": true,
-          "isPlaceholderData": true,
-          "isSuccess": true,
-        },
-        {
-          "data": 2,
-          "isFetching": false,
-          "isPlaceholderData": false,
-          "isSuccess": true,
-        },
-        {
-          "data": 2,
-          "isFetching": false,
-          "isPlaceholderData": false,
-          "isSuccess": true,
-        },
-        {
-          "data": 2,
-          "isFetching": true,
-          "isPlaceholderData": true,
-          "isSuccess": true,
-        },
-        {
-          "data": 3,
-          "isFetching": false,
-          "isPlaceholderData": false,
-          "isSuccess": true,
-        },
-      ]
-    `)
-
     expect(states[0]).toMatchObject({
       data: undefined,
       isFetching: true,

diff --git a/packages/react-query/src/useBaseQuery.ts b/packages/react-query/src/useBaseQuery.ts
@@ -82,9 +82,10 @@ export function useBaseQuery<
       ),
   )
 
-  const [result, setResult] = React.useState(() =>
-    observer.getOptimisticResult(defaultedOptions),
-  )
+  const [_, setForceUpdate] = React.useState(0)
+
+  const result =
+    observer.getOptimisticResult(defaultedOptions)
 
   // console.log('result', result)
   React.useEffect(() => {
@@ -94,8 +95,8 @@ export function useBaseQuery<
     console.log('subscribing to observer')
 
     const unsubscribe = observer.subscribe(
-      notifyManager.batchCalls((newResult) => {
-        setResult(newResult)
+      notifyManager.batchCalls(() => {
+        setForceUpdate(n => n + 1)
       }),
     )
 
@@ -106,8 +107,11 @@ export function useBaseQuery<
     return unsubscribe
   }, [observer, isRestoring])
 
+
   React.useEffect(() => {
-    observer.setOptions(defaultedOptions)
+    // Do not notify on updates because of changes in the options because
+    // these changes should already be reflected in the optimistic result.
+    observer.setOptions(defaultedOptions, { listeners: false })
   }, [defaultedOptions, observer])
 
   // Handle suspense