diff --git a/src/react/tests/useIsFetching.test.tsx b/src/react/tests/useIsFetching.test.tsx
index 085242cbfd..16c83156fe 100644
--- a/src/react/tests/useIsFetching.test.tsx
+++ b/src/react/tests/useIsFetching.test.tsx
@@ -100,7 +100,7 @@ describe('useIsFetching', () => {
}
renderWithClient(queryClient, )
- await waitFor(() => expect(isFetchings).toEqual([0, 0, 1, 2, 1, 0]))
+ await waitFor(() => expect(isFetchings).toEqual([0, 1, 1, 2, 1, 0]))
expect(consoleMock).not.toHaveBeenCalled()
expect(consoleMock.mock.calls[0]?.[0] ?? '').not.toMatch('setState')
@@ -159,4 +159,29 @@ describe('useIsFetching', () => {
await sleep(100)
expect(isFetchings).toEqual([0, 0, 1, 0])
})
+
+ it('should show the correct fetching state when mounted after a query', async () => {
+ const queryClient = new QueryClient()
+ const key = queryKey()
+
+ function Page() {
+ useQuery(key, async () => {
+ await sleep(10)
+ return 'test'
+ })
+
+ const isFetching = useIsFetching()
+
+ return (
+
+
isFetching: {isFetching}
+
+ )
+ }
+
+ const rendered = renderWithClient(queryClient, )
+
+ await rendered.findByText('isFetching: 1')
+ await rendered.findByText('isFetching: 0')
+ })
})
diff --git a/src/react/useIsFetching.ts b/src/react/useIsFetching.ts
index a1319c53dd..b104fe1483 100644
--- a/src/react/useIsFetching.ts
+++ b/src/react/useIsFetching.ts
@@ -3,8 +3,21 @@ import React from 'react'
import { notifyManager } from '../core/notifyManager'
import { QueryKey } from '../core/types'
import { parseFilterArgs, QueryFilters } from '../core/utils'
+import { QueryClient } from '../core'
import { useQueryClient } from './QueryClientProvider'
+const checkIsFetching = (
+ queryClient: QueryClient,
+ filters: QueryFilters,
+ isFetching: number,
+ setIsFetching: React.Dispatch>
+) => {
+ const newIsFetching = queryClient.isFetching(filters)
+ if (isFetching !== newIsFetching) {
+ setIsFetching(newIsFetching)
+ }
+}
+
export function useIsFetching(filters?: QueryFilters): number
export function useIsFetching(
queryKey?: QueryKey,
@@ -31,13 +44,22 @@ export function useIsFetching(
React.useEffect(() => {
mountedRef.current = true
+ checkIsFetching(
+ queryClient,
+ filtersRef.current,
+ isFetchingRef.current,
+ setIsFetching
+ )
+
const unsubscribe = queryClient.getQueryCache().subscribe(
notifyManager.batchCalls(() => {
if (mountedRef.current) {
- const newIsFetching = queryClient.isFetching(filtersRef.current)
- if (isFetchingRef.current !== newIsFetching) {
- setIsFetching(newIsFetching)
- }
+ checkIsFetching(
+ queryClient,
+ filtersRef.current,
+ isFetchingRef.current,
+ setIsFetching
+ )
}
})
)