@tanstack/react-query 4.24.10 → 5.0.0-alpha.1

package/src/__tests__/QueryClientProvider.test.tsx

@@ -1,15 +1,8 @@
 import * as React from 'react'
 import { render, waitFor } from '@testing-library/react'
-import { renderToString } from 'react-dom/server'
 
 import { sleep, queryKey, createQueryClient } from './utils'
-import {
-  QueryClient,
-  QueryClientProvider,
-  QueryCache,
-  useQuery,
-  useQueryClient,
-} from '..'
+import { QueryClientProvider, QueryCache, useQuery, useQueryClient } from '..'
 
 describe('QueryClientProvider', () => {
   test('sets a specific cache for all queries to use', async () => {
@@ -19,9 +12,12 @@ describe('QueryClientProvider', () => {
     const queryClient = createQueryClient({ queryCache })
 
     function Page() {
-      const { data } = useQuery(key, async () => {
-        await sleep(10)
-        return 'test'
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       return (
@@ -39,7 +35,7 @@ describe('QueryClientProvider', () => {
 
     await waitFor(() => rendered.getByText('test'))
 
-    expect(queryCache.find(key)).toBeDefined()
+    expect(queryCache.find({ queryKey: key })).toBeDefined()
   })
 
   test('allows multiple caches to be partitioned', async () => {
@@ -53,9 +49,12 @@ describe('QueryClientProvider', () => {
     const queryClient2 = createQueryClient({ queryCache: queryCache2 })
 
     function Page1() {
-      const { data } = useQuery(key1, async () => {
-        await sleep(10)
-        return 'test1'
+      const { data } = useQuery({
+        queryKey: key1,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test1'
+        },
       })
 
       return (
@@ -65,9 +64,12 @@ describe('QueryClientProvider', () => {
       )
     }
     function Page2() {
-      const { data } = useQuery(key2, async () => {
-        await sleep(10)
-        return 'test2'
+      const { data } = useQuery({
+        queryKey: key2,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test2'
+        },
       })
 
       return (
@@ -91,10 +93,10 @@ describe('QueryClientProvider', () => {
     await waitFor(() => rendered.getByText('test1'))
     await waitFor(() => rendered.getByText('test2'))
 
-    expect(queryCache1.find(key1)).toBeDefined()
-    expect(queryCache1.find(key2)).not.toBeDefined()
-    expect(queryCache2.find(key1)).not.toBeDefined()
-    expect(queryCache2.find(key2)).toBeDefined()
+    expect(queryCache1.find({ queryKey: key1 })).toBeDefined()
+    expect(queryCache1.find({ queryKey: key2 })).not.toBeDefined()
+    expect(queryCache2.find({ queryKey: key1 })).not.toBeDefined()
+    expect(queryCache2.find({ queryKey: key2 })).toBeDefined()
   })
 
   test("uses defaultOptions for queries when they don't provide their own config", async () => {
@@ -105,15 +107,18 @@ describe('QueryClientProvider', () => {
       queryCache,
       defaultOptions: {
         queries: {
-          cacheTime: Infinity,
+          gcTime: Infinity,
         },
       },
     })
 
     function Page() {
-      const { data } = useQuery(key, async () => {
-        await sleep(10)
-        return 'test'
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       return (
@@ -131,73 +136,8 @@ describe('QueryClientProvider', () => {
 
     await waitFor(() => rendered.getByText('test'))
 
-    expect(queryCache.find(key)).toBeDefined()
-    expect(queryCache.find(key)?.options.cacheTime).toBe(Infinity)
-  })
-
-  describe('with custom context', () => {
-    it('uses the correct context', async () => {
-      const key = queryKey()
-
-      const contextOuter = React.createContext<QueryClient | undefined>(
-        undefined,
-      )
-      const contextInner = React.createContext<QueryClient | undefined>(
-        undefined,
-      )
-
-      const queryCacheOuter = new QueryCache()
-      const queryClientOuter = new QueryClient({ queryCache: queryCacheOuter })
-
-      const queryCacheInner = new QueryCache()
-      const queryClientInner = new QueryClient({ queryCache: queryCacheInner })
-
-      const queryCacheInnerInner = new QueryCache()
-      const queryClientInnerInner = new QueryClient({
-        queryCache: queryCacheInnerInner,
-      })
-
-      function Page() {
-        const { data: testOuter } = useQuery(key, async () => 'testOuter', {
-          context: contextOuter,
-        })
-        const { data: testInner } = useQuery(key, async () => 'testInner', {
-          context: contextInner,
-        })
-        const { data: testInnerInner } = useQuery(
-          key,
-          async () => 'testInnerInner',
-        )
-
-        return (
-          <div>
-            <h1>
-              {testOuter} {testInner} {testInnerInner}
-            </h1>
-          </div>
-        )
-      }
-
-      // contextSharing should be ignored when passing a custom context.
-      const contextSharing = true
-
-      const rendered = render(
-        <QueryClientProvider client={queryClientOuter} context={contextOuter}>
-          <QueryClientProvider client={queryClientInner} context={contextInner}>
-            <QueryClientProvider
-              client={queryClientInnerInner}
-              contextSharing={contextSharing}
-            >
-              <Page />
-            </QueryClientProvider>
-          </QueryClientProvider>
-        </QueryClientProvider>,
-      )
-
-      await waitFor(() =>
-        rendered.getByText('testOuter testInner testInnerInner'),
-      )
-    })
+    expect(queryCache.find({ queryKey: key })).toBeDefined()
+    expect(queryCache.find({ queryKey: key })?.options.gcTime).toBe(Infinity)
   })
 
   describe('useQueryClient', () => {
@@ -217,59 +157,5 @@ describe('QueryClientProvider', () => {
 
       consoleMock.mockRestore()
     })
-
-    test('should use window to get the context when contextSharing is true', () => {
-      const queryCache = new QueryCache()
-      const queryClient = createQueryClient({ queryCache })
-
-      let queryClientFromHook: QueryClient | undefined
-      let queryClientFromWindow: QueryClient | undefined
-
-      function Page() {
-        queryClientFromHook = useQueryClient()
-        queryClientFromWindow = React.useContext(
-          window.ReactQueryClientContext as React.Context<
-            QueryClient | undefined
-          >,
-        )
-        return null
-      }
-
-      render(
-        <QueryClientProvider client={queryClient} contextSharing={true}>
-          <Page />
-        </QueryClientProvider>,
-      )
-
-      expect(queryClientFromHook).toEqual(queryClient)
-      expect(queryClientFromWindow).toEqual(queryClient)
-    })
-
-    test('should not use window to get the context when contextSharing is true and window does not exist', () => {
-      const queryCache = new QueryCache()
-      const queryClient = createQueryClient({ queryCache })
-
-      // Mock a non web browser environment
-      const windowSpy = jest
-        .spyOn(window, 'window', 'get')
-        .mockImplementation(undefined)
-
-      let queryClientFromHook: QueryClient | undefined
-
-      function Page() {
-        queryClientFromHook = useQueryClient()
-        return null
-      }
-
-      renderToString(
-        <QueryClientProvider client={queryClient} contextSharing={true}>
-          <Page />
-        </QueryClientProvider>,
-      )
-
-      expect(queryClientFromHook).toEqual(queryClient)
-
-      windowSpy.mockRestore()
-    })
   })
 })

package/src/__tests__/QueryResetErrorBoundary.test.tsx

@@ -17,14 +17,17 @@ describe('QueryErrorResetBoundary', () => {
   const queryClient = createQueryClient({ queryCache })
 
   it('should retry fetch if the reset error boundary has been reset', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
     const key = queryKey()
 
     let succeed = false
 
     function Page() {
-      const { data } = useQuery(
-        key,
-        async () => {
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           if (!succeed) {
             throw new Error('Error')
@@ -32,11 +35,9 @@ describe('QueryErrorResetBoundary', () => {
             return 'data'
           }
         },
-        {
-          retry: false,
-          useErrorBoundary: true,
-        },
-      )
+        retry: false,
+        throwErrors: true,
+      })
       return <div>{data}</div>
     }
 
@@ -70,17 +71,21 @@ describe('QueryErrorResetBoundary', () => {
     succeed = true
     fireEvent.click(rendered.getByText('retry'))
     await waitFor(() => rendered.getByText('data'))
+    consoleMock.mockRestore()
   })
 
   it('should not throw error if query is disabled', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
     const key = queryKey()
 
     let succeed = false
 
     function Page() {
-      const { data, status } = useQuery(
-        key,
-        async () => {
+      const { data, status } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           if (!succeed) {
             throw new Error('Error')
@@ -88,12 +93,10 @@ describe('QueryErrorResetBoundary', () => {
             return 'data'
           }
         },
-        {
-          retry: false,
-          enabled: !succeed,
-          useErrorBoundary: true,
-        },
-      )
+        retry: false,
+        enabled: !succeed,
+        throwErrors: true,
+      })
       return (
         <div>
           <div>status: {status}</div>
@@ -132,18 +135,23 @@ describe('QueryErrorResetBoundary', () => {
     succeed = true
     fireEvent.click(rendered.getByText('retry'))
     await waitFor(() => rendered.getByText('status: error'))
+    consoleMock.mockRestore()
   })
 
   it('should not throw error if query is disabled, and refetch if query becomes enabled again', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     const key = queryKey()
 
     let succeed = false
 
     function Page() {
       const [enabled, setEnabled] = React.useState(false)
-      const { data } = useQuery(
-        key,
-        async () => {
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           if (!succeed) {
             throw new Error('Error')
@@ -151,12 +159,10 @@ describe('QueryErrorResetBoundary', () => {
             return 'data'
           }
         },
-        {
-          retry: false,
-          enabled,
-          useErrorBoundary: true,
-        },
-      )
+        retry: false,
+        enabled,
+        throwErrors: true,
+      })
 
       React.useEffect(() => {
         setEnabled(true)
@@ -195,23 +201,26 @@ describe('QueryErrorResetBoundary', () => {
     succeed = true
     fireEvent.click(rendered.getByText('retry'))
     await waitFor(() => rendered.getByText('data'))
+    consoleMock.mockRestore()
   })
 
   it('should throw error if query is disabled and manually refetched', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     const key = queryKey()
 
     function Page() {
-      const { data, refetch, status, fetchStatus } = useQuery<string>(
-        key,
-        async () => {
+      const { data, refetch, status, fetchStatus } = useQuery<string>({
+        queryKey: key,
+        queryFn: async () => {
           throw new Error('Error')
         },
-        {
-          retry: false,
-          enabled: false,
-          useErrorBoundary: true,
-        },
-      )
+        retry: false,
+        enabled: false,
+        throwErrors: true,
+      })
 
       return (
         <div>
@@ -250,21 +259,26 @@ describe('QueryErrorResetBoundary', () => {
     )
 
     await waitFor(() =>
-      rendered.getByText('status: loading, fetchStatus: idle'),
+      rendered.getByText('status: pending, fetchStatus: idle'),
     )
     fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
     await waitFor(() => rendered.getByText('error boundary'))
+    consoleMock.mockRestore()
   })
 
   it('should not retry fetch if the reset error boundary has not been reset', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     const key = queryKey()
 
     let succeed = false
 
     function Page() {
-      const { data } = useQuery(
-        key,
-        async () => {
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           if (!succeed) {
             throw new Error('Error')
@@ -272,11 +286,9 @@ describe('QueryErrorResetBoundary', () => {
             return 'data'
           }
         },
-        {
-          retry: false,
-          useErrorBoundary: true,
-        },
-      )
+        retry: false,
+        throwErrors: true,
+      })
       return <div>{data}</div>
     }
 
@@ -309,17 +321,22 @@ describe('QueryErrorResetBoundary', () => {
     succeed = true
     fireEvent.click(rendered.getByText('retry'))
     await waitFor(() => rendered.getByText('error boundary'))
+    consoleMock.mockRestore()
   })
 
   it('should retry fetch if the reset error boundary has been reset and the query contains data from a previous fetch', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     const key = queryKey()
 
     let succeed = false
 
     function Page() {
-      const { data } = useQuery(
-        key,
-        async () => {
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           if (!succeed) {
             throw new Error('Error')
@@ -327,12 +344,10 @@ describe('QueryErrorResetBoundary', () => {
             return 'data'
           }
         },
-        {
-          retry: false,
-          useErrorBoundary: true,
-          initialData: 'initial',
-        },
-      )
+        retry: false,
+        throwErrors: true,
+        initialData: 'initial',
+      })
       return <div>{data}</div>
     }
 
@@ -366,18 +381,23 @@ describe('QueryErrorResetBoundary', () => {
     succeed = true
     fireEvent.click(rendered.getByText('retry'))
     await waitFor(() => rendered.getByText('data'))
+    consoleMock.mockRestore()
   })
 
   it('should not retry fetch if the reset error boundary has not been reset after a previous reset', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     const key = queryKey()
 
     let succeed = false
     let shouldReset = true
 
     function Page() {
-      const { data } = useQuery(
-        key,
-        async () => {
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           if (!succeed) {
             throw new Error('Error')
@@ -385,11 +405,9 @@ describe('QueryErrorResetBoundary', () => {
             return 'data'
           }
         },
-        {
-          retry: false,
-          useErrorBoundary: true,
-        },
-      )
+        retry: false,
+        throwErrors: true,
+      })
       return <div>{data}</div>
     }
 
@@ -431,25 +449,28 @@ describe('QueryErrorResetBoundary', () => {
     shouldReset = false
     fireEvent.click(rendered.getByText('retry'))
     await waitFor(() => rendered.getByText('error boundary'))
+    consoleMock.mockRestore()
   })
 
   it('should throw again on error after the reset error boundary has been reset', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     const key = queryKey()
     let fetchCount = 0
 
     function Page() {
-      const { data } = useQuery<string>(
-        key,
-        async () => {
+      const { data } = useQuery<string>({
+        queryKey: key,
+        queryFn: async () => {
           fetchCount++
           await sleep(10)
           throw new Error('Error')
         },
-        {
-          retry: false,
-          useErrorBoundary: true,
-        },
-      )
+        retry: false,
+        throwErrors: true,
+      })
       return <div>{data}</div>
     }
 
@@ -486,17 +507,22 @@ describe('QueryErrorResetBoundary', () => {
     fireEvent.click(rendered.getByText('retry'))
     await waitFor(() => rendered.getByText('error boundary'))
     expect(fetchCount).toBe(3)
+    consoleMock.mockRestore()
   })
 
   it('should never render the component while the query is in error state', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     const key = queryKey()
     let fetchCount = 0
     let renders = 0
 
     function Page() {
-      const { data } = useQuery(
-        key,
-        async () => {
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           fetchCount++
           await sleep(10)
           if (fetchCount > 2) {
@@ -505,11 +531,9 @@ describe('QueryErrorResetBoundary', () => {
             throw new Error('Error')
           }
         },
-        {
-          retry: false,
-          suspense: true,
-        },
-      )
+        retry: false,
+        suspense: true,
+      })
       renders++
       return <div>{data}</div>
     }
@@ -550,9 +574,14 @@ describe('QueryErrorResetBoundary', () => {
     await waitFor(() => rendered.getByText('data'))
     expect(fetchCount).toBe(3)
     expect(renders).toBe(1)
+    consoleMock.mockRestore()
   })
 
   it('should render children', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     function Page() {
       return (
         <div>
@@ -569,17 +598,22 @@ describe('QueryErrorResetBoundary', () => {
     )
 
     expect(rendered.queryByText('page')).not.toBeNull()
+    consoleMock.mockRestore()
   })
 
   it('should show error boundary when using tracked queries even though we do not track the error field', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     const key = queryKey()
 
     let succeed = false
 
     function Page() {
-      const { data } = useQuery(
-        key,
-        async () => {
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           if (!succeed) {
             throw new Error('Error')
@@ -587,11 +621,9 @@ describe('QueryErrorResetBoundary', () => {
             return 'data'
           }
         },
-        {
-          retry: false,
-          useErrorBoundary: true,
-        },
-      )
+        retry: false,
+        throwErrors: true,
+      })
       return <div>{data}</div>
     }
 
@@ -625,5 +657,6 @@ describe('QueryErrorResetBoundary', () => {
     succeed = true
     fireEvent.click(rendered.getByText('retry'))
     await waitFor(() => rendered.getByText('data'))
+    consoleMock.mockRestore()
   })
 })