fix: useQueryState impl

the value of the ref can get out of sync if we only write the ref in the subscribe function

Author: TkDodo

packages/react-query/src/__tests__/useIsFetching.test.tsx

@@ -176,16 +176,11 @@ describe('useIsFetching', () => {
     const queryClient = createQueryClient()
     const key = queryKey()
 
-    let resolve!: () => void
-    const promise = new Promise<void>((_resolve) => {
-      resolve = _resolve
-    })
-
     function Page() {
       useQuery({
         queryKey: key,
         queryFn: async () => {
-          await promise
+          await sleep(100)
           return 'test'
         },
       })
@@ -202,35 +197,27 @@ describe('useIsFetching', () => {
     const rendered = renderWithClient(queryClient, <Page />)
 
     await rendered.findByText('isFetching: 1')
-
-    resolve()
-
     await rendered.findByText('isFetching: 0')
   })
 
   it('should use provided custom queryClient', async () => {
     const queryClient = createQueryClient()
     const key = queryKey()
 
-    let resolve!: () => void
-    const promise = new Promise<void>((_resolve) => {
-      resolve = _resolve
-    })
-
     function Page() {
+      const isFetching = useIsFetching({}, queryClient)
+
       useQuery(
         {
           queryKey: key,
           queryFn: async () => {
-            await promise
+            await sleep(10)
             return 'test'
           },
         },
         queryClient,
       )
 
-      const isFetching = useIsFetching({}, queryClient)
-
       return (
         <div>
           <div>isFetching: {isFetching}</div>
@@ -241,6 +228,5 @@ describe('useIsFetching', () => {
     const rendered = render(<Page></Page>)
 
     await waitFor(() => rendered.getByText('isFetching: 1'))
-    resolve()
   })
 })

packages/react-query/src/useQueryState.ts

@@ -26,11 +26,7 @@ function getResult<TResult = QueryState>(
     .findAll(options.filters)
     .map(
       (query): TResult =>
-        (options.select
-          ? options.select(
-              query as Query<unknown, DefaultError, unknown, QueryKey>,
-            )
-          : query.state) as TResult,
+        (options.select ? options.select(query) : query.state) as TResult,
     )
 }
 
@@ -52,19 +48,20 @@ export function useQueryState<TResult = QueryState>(
   return React.useSyncExternalStore(
     React.useCallback(
       (onStoreChange) =>
-        queryCache.subscribe(() => {
-          const nextResult = replaceEqualDeep(
-            result.current,
-            getResult(queryCache, optionsRef.current),
-          )
-          if (result.current !== nextResult) {
-            result.current = nextResult
-            notifyManager.schedule(onStoreChange)
-          }
-        }),
+        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),
       [queryCache],
     ),
-    () => result.current,
+    () => {
+      const nextResult = replaceEqualDeep(
+        result.current,
+        getResult(queryCache, optionsRef.current),
+      )
+      if (result.current !== nextResult) {
+        result.current = nextResult
+      }
+
+      return result.current
+    },
     () => result.current,
   )!
 }