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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "5.0.0-alpha.85",
+  "version": "5.0.0-alpha.86",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/query-core": "5.0.0-alpha.85"
+    "@tanstack/query-core": "5.0.0-alpha.86"
   },
   "devDependencies": {
     "vite-plugin-solid": "^2.5.0"

package/src/__tests__/createMutation.test.tsx

@@ -15,7 +15,7 @@ import {
 } from '..'
 import {
   createQueryClient,
-  mockNavigatorOnLine,
+  mockOnlineManagerIsOnline,
   queryKey,
   setActTimeout,
   sleep,
@@ -495,7 +495,7 @@ describe('createMutation', () => {
   })
 
   it('should not retry mutations while offline', async () => {
-    const onlineMock = mockNavigatorOnLine(false)
+    const onlineMock = mockOnlineManagerIsOnline(false)
 
     let count = 0
 
@@ -535,6 +535,8 @@ describe('createMutation', () => {
       ).toBeInTheDocument()
     })
 
+    window.dispatchEvent(new Event('offline'))
+
     fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
 
     await waitFor(() => {
@@ -545,7 +547,7 @@ describe('createMutation', () => {
 
     expect(count).toBe(0)
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     await sleep(100)
@@ -557,12 +559,10 @@ describe('createMutation', () => {
     })
 
     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
 
@@ -595,6 +595,8 @@ describe('createMutation', () => {
 
     await screen.findByText('data: null, status: idle, isPaused: false')
 
+    window.dispatchEvent(new Event('offline'))
+
     fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
 
     await screen.findByText('data: null, status: pending, isPaused: true')
@@ -602,19 +604,17 @@ describe('createMutation', () => {
     expect(onMutate).toHaveBeenCalledTimes(1)
     expect(onMutate).toHaveBeenCalledWith('todo')
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     await screen.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> = []
 
@@ -667,7 +667,7 @@ describe('createMutation', () => {
   })
 
   it('should be able to retry a mutation when online', async () => {
-    const onlineMock = mockNavigatorOnLine(false)
+    const onlineMock = mockOnlineManagerIsOnline(false)
 
     let count = 0
     const states: CreateMutationResult<any, any, any, any>[] = []
@@ -693,6 +693,7 @@ describe('createMutation', () => {
       createEffect(() => {
         const { mutate } = mutation
         setActTimeout(() => {
+          window.dispatchEvent(new Event('offline'))
           mutate('todo')
         }, 10)
       })
@@ -734,7 +735,7 @@ describe('createMutation', () => {
       failureReason: new Error('oops'),
     })
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     await sleep(50)
@@ -753,8 +754,6 @@ describe('createMutation', () => {
       failureReason: null,
       data: 'data',
     })
-
-    onlineMock.mockRestore()
   })
 
   it('should not change state if unmounted', async () => {

package/src/__tests__/createQuery.test.tsx

@@ -22,7 +22,7 @@ import {
   Blink,
   createQueryClient,
   expectType,
-  mockNavigatorOnLine,
+  mockOnlineManagerIsOnline,
   mockVisibilityState,
   queryKey,
   setActTimeout,
@@ -2129,39 +2129,6 @@ describe('createQuery', () => {
     screen.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 = readonly [typeof key, typeof variables]
-    const states: CreateQueryResult<CustomQueryKey, unknown>[] = []
-
-    function Page() {
-      const state = createQuery(() => ({
-        queryKey: [key, variables] as const,
-        queryFn: async (ctx) => {
-          await sleep(10)
-          return ctx.queryKey
-        },
-      }))
-
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-      return null
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await sleep(20)
-
-    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')
@@ -4999,7 +4966,7 @@ describe('createQuery', () => {
 
   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> = []
@@ -5033,9 +5000,11 @@ describe('createQuery', () => {
         </QueryClientProvider>
       ))
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() => screen.getByText('status: pending, isPaused: true'))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() => screen.getByText('status: success, isPaused: false'))
@@ -5044,8 +5013,6 @@ describe('createQuery', () => {
       })
 
       expect(states).toEqual(['paused', 'fetching', 'idle'])
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not refetch if you are offline', async () => {
@@ -5087,7 +5054,8 @@ describe('createQuery', () => {
 
       await waitFor(() => screen.getByText('data: data1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
+      window.dispatchEvent(new Event('offline'))
       fireEvent.click(screen.getByRole('button', { name: /invalidate/i }))
 
       await waitFor(() =>
@@ -5097,7 +5065,7 @@ describe('createQuery', () => {
       )
       await waitFor(() => screen.getByText('failureReason: null'))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5114,8 +5082,6 @@ describe('createQuery', () => {
       await waitFor(() => {
         expect(screen.getByText('data: data2')).toBeInTheDocument()
       })
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not refetch if you are offline and refocus', async () => {
@@ -5155,7 +5121,7 @@ describe('createQuery', () => {
 
       await waitFor(() => screen.getByText('data: data1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
       fireEvent.click(screen.getByRole('button', { name: /invalidate/i }))
 
       await waitFor(() =>
@@ -5201,7 +5167,7 @@ describe('createQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       render(() => (
         <QueryClientProvider client={queryClient}>
@@ -5256,7 +5222,7 @@ describe('createQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       render(() => (
         <QueryClientProvider client={queryClient}>
@@ -5314,7 +5280,7 @@ describe('createQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       render(() => (
         <QueryClientProvider client={queryClient}>
@@ -5322,6 +5288,8 @@ describe('createQuery', () => {
         </QueryClientProvider>
       ))
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() =>
         screen.getByText('status: success, fetchStatus: paused'),
       )
@@ -5341,7 +5309,7 @@ describe('createQuery', () => {
       // triggers a second pause
       window.dispatchEvent(new Event('visibilitychange'))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5352,7 +5320,6 @@ describe('createQuery', () => {
       })
 
       expect(count).toBe(1)
-      onlineMock.mockRestore()
     })
 
     it('online queries should pause retries if you are offline', async () => {
@@ -5395,7 +5362,8 @@ describe('createQuery', () => {
       )
       await waitFor(() => screen.getByText('failureReason: failed1'))
 
-      const onlineMock = mockNavigatorOnLine(false)
+      window.dispatchEvent(new Event('offline'))
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       await sleep(20)
 
@@ -5408,7 +5376,7 @@ describe('createQuery', () => {
 
       expect(count).toBe(1)
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5417,8 +5385,6 @@ describe('createQuery', () => {
       await waitFor(() => screen.getByText('failureReason: failed3'))
 
       expect(count).toBe(3)
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should fetch if paused and we go online even if already unmounted (because not cancelled)', async () => {
@@ -5456,7 +5422,7 @@ describe('createQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       render(() => (
         <QueryClientProvider client={queryClient}>
@@ -5464,13 +5430,15 @@ describe('createQuery', () => {
         </QueryClientProvider>
       ))
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() =>
         screen.getByText('status: pending, fetchStatus: paused'),
       )
 
       fireEvent.click(screen.getByRole('button', { name: /hide/i }))
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await sleep(15)
@@ -5481,8 +5449,6 @@ describe('createQuery', () => {
       })
 
       expect(count).toBe(1)
-
-      onlineMock.mockRestore()
     })
 
     it('online queries should not fetch if paused and we go online when cancelled and no refetchOnReconnect', async () => {
@@ -5515,7 +5481,7 @@ describe('createQuery', () => {
         )
       }
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       render(() => (
         <QueryClientProvider client={queryClient}>
@@ -5599,7 +5565,7 @@ describe('createQuery', () => {
         screen.getByText('status: success, fetchStatus: idle'),
       )
 
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       fireEvent.click(screen.getByRole('button', { name: /invalidate/i }))
 
@@ -5629,7 +5595,7 @@ describe('createQuery', () => {
 
   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
@@ -5671,7 +5637,7 @@ describe('createQuery', () => {
     })
 
     it('always queries should not pause retries', async () => {
-      const onlineMock = mockNavigatorOnLine(false)
+      const onlineMock = mockOnlineManagerIsOnline(false)
 
       const key = queryKey()
       let count = 0
@@ -5721,7 +5687,7 @@ describe('createQuery', () => {
 
   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
@@ -5756,6 +5722,8 @@ describe('createQuery', () => {
         </QueryClientProvider>
       ))
 
+      window.dispatchEvent(new Event('offline'))
+
       await waitFor(() =>
         screen.getByText(
           'status: pending, fetchStatus: paused, failureCount: 1',
@@ -5765,7 +5733,7 @@ describe('createQuery', () => {
 
       expect(count).toBe(1)
 
-      onlineMock.mockReturnValue(true)
+      onlineMock.mockRestore()
       window.dispatchEvent(new Event('online'))
 
       await waitFor(() =>
@@ -5774,8 +5742,6 @@ describe('createQuery', () => {
       await waitFor(() => screen.getByText('failureReason: failed3'))
 
       expect(count).toBe(3)
-
-      onlineMock.mockRestore()
     })
   })
 

package/src/__tests__/utils.tsx

@@ -1,5 +1,6 @@
 import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
 import { vi } from 'vitest'
+import { onlineManager } from '@tanstack/query-core'
 import { QueryClient } from '../QueryClient'
 import type { QueryClientConfig } from '@tanstack/query-core'
 import type { ParentProps } from 'solid-js'
@@ -41,8 +42,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)
 }
 
 export function sleep(timeout: number): Promise<void> {