@tanstack/react-query 5.0.0-alpha.85 → 5.0.0-alpha.86

package/build/lib/__tests__/utils.d.ts

@@ -11,7 +11,7 @@ export declare const Blink: ({ duration, children, }: {
 }) => JSX.Element;
 export declare function createQueryClient(config?: QueryClientConfig): QueryClient;
 export declare function mockVisibilityState(value: DocumentVisibilityState): SpyInstance<[], DocumentVisibilityState>;
-export declare function mockNavigatorOnLine(value: boolean): SpyInstance<[], boolean>;
+export declare function mockOnlineManagerIsOnline(value: boolean): SpyInstance<[], boolean>;
 export declare function queryKey(): Array<string>;
 export declare function sleep(timeout: number): Promise<void>;
 export declare function setActTimeout(fn: () => void, ms?: number): NodeJS.Timeout;

package/build/lib/__tests__/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/__tests__/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAGpD,OAAO,EAAE,WAAW,EAAuB,MAAM,IAAI,CAAA;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,IAAI,CAAA;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,KAAK,CAAC,YAAY,GACrB,UAAU,CAAC,OAAO,MAAM,CAAC,CAW3B;AAED,eAAO,MAAM,KAAK;cAIN,MAAM;cACN,MAAM,SAAS;iBAa1B,CAAA;AAED,wBAAgB,iBAAiB,CAAC,MAAM,CAAC,EAAE,iBAAiB,GAAG,WAAW,CAEzE;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,uBAAuB,GAC7B,WAAW,CAAC,EAAE,EAAE,uBAAuB,CAAC,CAE1C;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,WAAW,CAAC,EAAE,EAAE,OAAO,CAAC,CAE5E;AAGD,wBAAgB,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,CAGxC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAIpD;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,CAAC,EAAE,MAAM,kBAMxD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAExC;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,SAAS,CAC/D,CAAC,OACI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,GACtB,IAAI,GACJ,KAAK,CAAA;AAET,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAA;AAEtC;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,IAAI,CAExE;AAID,wBAAgB,WAAW,CAAC,QAAQ,EAAE,OAAO,cAW5C;AAED,eAAO,MAAM,YAAY,UAAW,MAAM,IAAI,YAAS,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/__tests__/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAIpD,OAAO,EAAE,WAAW,EAAsC,MAAM,IAAI,CAAA;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,IAAI,CAAA;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,KAAK,CAAC,YAAY,GACrB,UAAU,CAAC,OAAO,MAAM,CAAC,CAW3B;AAED,eAAO,MAAM,KAAK;cAIN,MAAM;cACN,MAAM,SAAS;iBAa1B,CAAA;AAED,wBAAgB,iBAAiB,CAAC,MAAM,CAAC,EAAE,iBAAiB,GAAG,WAAW,CAEzE;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,uBAAuB,GAC7B,WAAW,CAAC,EAAE,EAAE,uBAAuB,CAAC,CAE1C;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,OAAO,GACb,WAAW,CAAC,EAAE,EAAE,OAAO,CAAC,CAE1B;AAGD,wBAAgB,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,CAGxC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAIpD;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,CAAC,EAAE,MAAM,kBAMxD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAExC;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,SAAS,CAC/D,CAAC,OACI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,GACtB,IAAI,GACJ,KAAK,CAAA;AAET,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAA;AAEtC;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,IAAI,CAExE;AAID,wBAAgB,WAAW,CAAC,QAAQ,EAAE,OAAO,cAW5C;AAED,eAAO,MAAM,YAAY,UAAW,MAAM,IAAI,YAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "5.0.0-alpha.85",
+  "version": "5.0.0-alpha.86",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "client-only": "0.0.1",
-    "@tanstack/query-core": "5.0.0-alpha.85"
+    "@tanstack/query-core": "5.0.0-alpha.86"
   },
   "devDependencies": {
     "@types/react": "^18.2.4",

package/src/__tests__/useMutation.test.tsx

@@ -7,7 +7,7 @@ import { vi } from 'vitest'
 import { MutationCache, QueryCache, useMutation } from '..'
 import {
   createQueryClient,
-  mockNavigatorOnLine,
+  mockOnlineManagerIsOnline,
   queryKey,
   renderWithClient,
   setActTimeout,
@@ -427,7 +427,7 @@ describe('useMutation', () => {
   })
 
   it('should not retry mutations while offline', async () => {
-    const onlineMock = mockNavigatorOnLine(false)
+    const onlineMock = mockOnlineManagerIsOnline(false)
 
     let count = 0
 
@@ -455,6 +455,8 @@ describe('useMutation', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
+    window.dispatchEvent(new Event('offline'))
+
     await waitFor(() => {
       expect(
         rendered.getByText('error: null, status: idle, isPaused: false'),
@@ -471,7 +473,7 @@ describe('useMutation', () => {
 
     expect(count).toBe(0)
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     await sleep(100)
@@ -483,12 +485,10 @@ describe('useMutation', () => {
     })
 
     expect(count).toBe(2)
-
-    onlineMock.mockRestore()
   })
 
   it('should call onMutate even if paused', async () => {
-    const onlineMock = mockNavigatorOnLine(false)
+    const onlineMock = mockOnlineManagerIsOnline(false)
     const onMutate = vi.fn()
     let count = 0
 
@@ -517,6 +517,8 @@ describe('useMutation', () => {
 
     await rendered.findByText('data: null, status: idle, isPaused: false')
 
+    window.dispatchEvent(new Event('offline'))
+
     fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
 
     await rendered.findByText('data: null, status: pending, isPaused: true')
@@ -524,19 +526,17 @@ describe('useMutation', () => {
     expect(onMutate).toHaveBeenCalledTimes(1)
     expect(onMutate).toHaveBeenCalledWith('todo')
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     await rendered.findByText('data: 1, status: success, isPaused: false')
 
     expect(onMutate).toHaveBeenCalledTimes(1)
     expect(count).toBe(1)
-
-    onlineMock.mockRestore()
   })
 
   it('should optimistically go to paused state if offline', async () => {
-    const onlineMock = mockNavigatorOnLine(false)
+    const onlineMock = mockOnlineManagerIsOnline(false)
     let count = 0
     const states: Array<string> = []
 
@@ -566,6 +566,8 @@ describe('useMutation', () => {
 
     await rendered.findByText('data: null, status: idle, isPaused: false')
 
+    window.dispatchEvent(new Event('offline'))
+
     fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
 
     await rendered.findByText('data: null, status: pending, isPaused: true')
@@ -574,16 +576,14 @@ describe('useMutation', () => {
     expect(states[0]).toBe('idle, false')
     expect(states[1]).toBe('pending, true')
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     await rendered.findByText('data: 1, status: success, isPaused: false')
-
-    onlineMock.mockRestore()
   })
 
   it('should be able to retry a mutation when online', async () => {
-    const onlineMock = mockNavigatorOnLine(false)
+    const onlineMock = mockOnlineManagerIsOnline(false)
 
     let count = 0
     const states: UseMutationResult<any, any, any, any>[] = []
@@ -608,6 +608,7 @@ describe('useMutation', () => {
 
       React.useEffect(() => {
         setActTimeout(() => {
+          window.dispatchEvent(new Event('offline'))
           mutate('todo')
         }, 10)
       }, [mutate])
@@ -645,7 +646,7 @@ describe('useMutation', () => {
       failureReason: new Error('oops'),
     })
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     await sleep(50)
@@ -664,8 +665,6 @@ describe('useMutation', () => {
       failureReason: null,
       data: 'data',
     })
-
-    onlineMock.mockRestore()
   })
 
   it('should not change state if unmounted', async () => {

package/src/__tests__/useQuery.test.tsx

@@ -8,7 +8,7 @@ import {
   Blink,
   createQueryClient,
   expectType,
-  mockNavigatorOnLine,
+  mockOnlineManagerIsOnline,
   mockVisibilityState,
   queryKey,
   renderWithClient,
@@ -18,7 +18,6 @@ import {
 import type {
   DefinedUseQueryResult,
   QueryFunction,
-  QueryFunctionContext,
   UseQueryOptions,
   UseQueryResult,
 } from '..'
@@ -2437,33 +2436,6 @@ describe('useQuery', () => {
     rendered.getByText('status: pending')
   })
 
-  // See https://github.com/tannerlinsley/react-query/issues/147
-  it('should not pass stringified variables to query function', async () => {
-    const key = queryKey()
-    const variables = { number: 5, boolean: false, object: {}, array: [] }
-    type CustomQueryKey = [typeof key, typeof variables]
-    const states: UseQueryResult<CustomQueryKey>[] = []
-
-    const queryFn = async (ctx: QueryFunctionContext<CustomQueryKey>) => {
-      await sleep(10)
-      return ctx.queryKey
-    }
-
-    function Page() {
-      const state = useQuery({ queryKey: [key, variables], queryFn })
-      states.push(state)
-      return <div>{state.status}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('success')
-    })
-
-    expect(states[1]?.data).toEqual([key, variables])
-  })
-
   it('should not refetch query on focus when `enabled` is set to `false`', async () => {
     const key = queryKey()
     const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
@@ -5081,7 +5053,7 @@ describe('useQuery', () => {
 
   describe('networkMode online', () => {
     it('online queries should not start fetching if you are offline', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       const states: Array<any> = []
@@ -5110,10 +5082,11 @@ describe('useQuery', () => {
       }
 
       const rendered = renderWithClient(queryClient, <Page />)
+      window.dispatchEvent(new Event('offline'))
 
       await waitFor(() => rendered.getByText('status: pending, isPaused: true'))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5124,8 +5097,6 @@ describe('useQuery', () => {
       })
 
       expect(states).toEqual(['paused', 'fetching', 'idle'])
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not refetch if you are offline', async () => {
@@ -5163,7 +5134,9 @@ describe('useQuery', () => {
 
       await waitFor(() => rendered.getByText('data: data1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
+      window.dispatchEvent(new Event('offline'))
+
       fireEvent.click(rendered.getByRole('button', { name: /invalidate/i }))
 
       await waitFor(() =>
@@ -5173,7 +5146,7 @@ describe('useQuery', () => {
       )
       await waitFor(() => rendered.getByText('failureReason: null'))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5192,8 +5165,6 @@ describe('useQuery', () => {
       await waitFor(() => {
         expect(rendered.getByText('data: data2')).toBeInTheDocument()
       })
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not refetch if you are offline and refocus', async () => {
@@ -5229,7 +5200,7 @@ describe('useQuery', () => {
 
       await waitFor(() => rendered.getByText('data: data1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
       fireEvent.click(rendered.getByRole('button', { name: /invalidate/i }))
 
       await waitFor(() =>
@@ -5275,7 +5246,7 @@ describe('useQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const rendered = renderWithClient(queryClient, <Page />)
 
@@ -5326,7 +5297,7 @@ describe('useQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const rendered = renderWithClient(queryClient, <Page />)
 
@@ -5380,9 +5351,10 @@ describe('useQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const rendered = renderWithClient(queryClient, <Page />)
+      window.dispatchEvent(new Event('offline'))
 
       await waitFor(() =>
         rendered.getByText('status: success, fetchStatus: paused'),
@@ -5405,7 +5377,7 @@ describe('useQuery', () => {
         window.dispatchEvent(new Event('visibilitychange'))
       })
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       act(() => {
         window.dispatchEvent(new Event('online'))
       })
@@ -5418,7 +5390,6 @@ describe('useQuery', () => {
       })
 
       expect(count).toBe(1)
-      onlineMock.mockRestore()
     })
 
     it('online queries should pause retries if you are offline', async () => {
@@ -5457,7 +5428,7 @@ describe('useQuery', () => {
       )
       await waitFor(() => rendered.getByText('failureReason: failed1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
       window.dispatchEvent(new Event('offline'))
 
       await sleep(20)
@@ -5519,17 +5490,19 @@ describe('useQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const rendered = renderWithClient(queryClient, <Page />)
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() =>
         rendered.getByText('status: pending, fetchStatus: paused'),
       )
 
       fireEvent.click(rendered.getByRole('button', { name: /hide/i }))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() => {
@@ -5542,8 +5515,6 @@ describe('useQuery', () => {
       // give it a bit more time to make sure queryFn is not called again
       await sleep(15)
       expect(count).toBe(1)
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not fetch if paused and we go online when cancelled and no refetchOnReconnect', async () => {
@@ -5576,7 +5547,7 @@ describe('useQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const rendered = renderWithClient(queryClient, <Page />)
 
@@ -5652,7 +5623,7 @@ describe('useQuery', () => {
         rendered.getByText('status: success, fetchStatus: idle'),
       )
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       fireEvent.click(rendered.getByRole('button', { name: /invalidate/i }))
 
@@ -5682,7 +5653,7 @@ describe('useQuery', () => {
 
   describe('networkMode always', () => {
     it('always queries should start fetching even if you are offline', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       let count = 0
@@ -5722,7 +5693,7 @@ describe('useQuery', () => {
     })
 
     it('always queries should not pause retries', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       let count = 0
@@ -5768,7 +5739,7 @@ describe('useQuery', () => {
 
   describe('networkMode offlineFirst', () => {
     it('offlineFirst queries should start fetching if you are offline, but pause retries', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       let count = 0
@@ -5799,6 +5770,8 @@ describe('useQuery', () => {
 
       const rendered = renderWithClient(queryClient, <Page />)
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() =>
         rendered.getByText(
           'status: pending, fetchStatus: paused, failureCount: 1',
@@ -5808,7 +5781,7 @@ describe('useQuery', () => {
 
       expect(count).toBe(1)
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5817,8 +5790,6 @@ describe('useQuery', () => {
       await waitFor(() => rendered.getByText('failureReason: failed3'))
 
       expect(count).toBe(3)
-
-      onlineMock.mockRestore()
     })
   })
 

package/src/__tests__/utils.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { act, render } from '@testing-library/react'
+
 import * as utils from '@tanstack/query-core'
 import { vi } from 'vitest'
-import { QueryClient, QueryClientProvider } from '..'
+import { QueryClient, QueryClientProvider, onlineManager } from '..'
 import type { QueryClientConfig } from '..'
 import type { SpyInstance } from 'vitest'
 
@@ -52,8 +53,10 @@ export function mockVisibilityState(
   return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
 }
 
-export function mockNavigatorOnLine(value: boolean): SpyInstance<[], boolean> {
-  return vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
+export function mockOnlineManagerIsOnline(
+  value: boolean,
+): SpyInstance<[], boolean> {
+  return vi.spyOn(onlineManager, 'isOnline').mockReturnValue(value)
 }
 
 let queryKeyCount = 0