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

package/src/__tests__/useInfiniteQuery.type.test.tsx

@@ -0,0 +1,131 @@
+import type { InfiniteData } from '@tanstack/query-core'
+import { QueryClient } from '@tanstack/query-core'
+import { useInfiniteQuery } from '../useInfiniteQuery'
+import { useQuery } from '../useQuery'
+import type { Expect, Equal } from './utils'
+import { doNotExecute } from './utils'
+
+describe('pageParam', () => {
+  it('defaultPageParam should define type of param passed to queryFunctionContext', () => {
+    doNotExecute(() => {
+      useInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: ({ pageParam }) => {
+          const result: Expect<Equal<number, typeof pageParam>> = true
+          return result
+        },
+        defaultPageParam: 1,
+        getNextPageParam: () => undefined,
+      })
+    })
+  })
+
+  it('there should be no pageParam passed to queryFn of useQuery', () => {
+    doNotExecute(() => {
+      useQuery({
+        queryKey: ['key'],
+        // @ts-expect-error there should be no pageParam passed to queryFn of useQuery
+        queryFn: ({ pageParam }) => {
+          return String(pageParam)
+        },
+      })
+    })
+  })
+
+  it('defaultPageParam should define type of param passed to queryFunctionContext for fetchInfiniteQuery', () => {
+    doNotExecute(() => {
+      const queryClient = new QueryClient()
+      queryClient.fetchInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: ({ pageParam }) => {
+          const result: Expect<Equal<number, typeof pageParam>> = true
+          return result
+        },
+        defaultPageParam: 1,
+      })
+    })
+  })
+
+  it('defaultPageParam should define type of param passed to queryFunctionContext for prefetchInfiniteQuery', () => {
+    doNotExecute(() => {
+      const queryClient = new QueryClient()
+      queryClient.prefetchInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: ({ pageParam }) => {
+          const result: Expect<Equal<number, typeof pageParam>> = true
+          return result
+        },
+        defaultPageParam: 1,
+      })
+    })
+  })
+})
+
+describe('select', () => {
+  it('should still return paginated data if no select result', () => {
+    doNotExecute(() => {
+      const infiniteQuery = useInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: ({ pageParam }) => {
+          return pageParam * 5
+        },
+        defaultPageParam: 1,
+        getNextPageParam: () => undefined,
+      })
+
+      const result: Expect<
+        Equal<InfiniteData<number> | undefined, (typeof infiniteQuery)['data']>
+      > = true
+      return result
+    })
+  })
+
+  it('should be able to transform data to arbitrary result', () => {
+    doNotExecute(() => {
+      const infiniteQuery = useInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: ({ pageParam }) => {
+          return pageParam * 5
+        },
+        defaultPageParam: 1,
+        getNextPageParam: () => undefined,
+        select: (data) => {
+          const result: Expect<Equal<InfiniteData<number>, typeof data>> = true
+          return result
+        },
+      })
+
+      const result: Expect<
+        Equal<true | undefined, (typeof infiniteQuery)['data']>
+      > = true
+      return result
+    })
+  })
+  it('should pass transformed data to onSuccess', () => {
+    doNotExecute(() => {
+      const infiniteQuery = useInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: ({ pageParam }) => {
+          return pageParam * 5
+        },
+        defaultPageParam: 1,
+        getNextPageParam: () => undefined,
+        select: (data) => {
+          return {
+            ...data,
+            pages: data.pages.map((page) => page.toString()),
+          }
+        },
+        onSuccess: (data) => {
+          const result: Expect<Equal<InfiniteData<string>, typeof data>> = true
+          doNotExecute(() => result)
+        },
+      })
+
+      const result: Expect<
+        Equal<InfiniteData<string> | undefined, (typeof infiniteQuery)['data']>
+      > = true
+      return result
+    })
+  })
+})

package/src/__tests__/useIsFetching.test.tsx

@@ -1,6 +1,5 @@
-import { fireEvent, waitFor } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { ErrorBoundary } from 'react-error-boundary'
 
 import {
   createQueryClient,
@@ -9,7 +8,6 @@ import {
   setActTimeout,
   sleep,
 } from './utils'
-import type { QueryClient } from '..'
 import { QueryCache, useIsFetching, useQuery } from '..'
 
 describe('useIsFetching', () => {
@@ -27,16 +25,14 @@ describe('useIsFetching', () => {
     function Query() {
       const [ready, setReady] = React.useState(false)
 
-      useQuery(
-        key,
-        async () => {
+      useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(50)
           return 'test'
         },
-        {
-          enabled: ready,
-        },
-      )
+        enabled: ready,
+      })
 
       return <button onClick={() => setReady(true)}>setReady</button>
     }
@@ -74,17 +70,23 @@ describe('useIsFetching', () => {
     }
 
     function FirstQuery() {
-      useQuery(key1, async () => {
-        await sleep(100)
-        return 'data'
+      useQuery({
+        queryKey: key1,
+        queryFn: async () => {
+          await sleep(100)
+          return 'data'
+        },
       })
       return null
     }
 
     function SecondQuery() {
-      useQuery(key2, async () => {
-        await sleep(100)
-        return 'data'
+      useQuery({
+        queryKey: key2,
+        queryFn: async () => {
+          await sleep(100)
+          return 'data'
+        },
       })
       return null
     }
@@ -119,24 +121,30 @@ describe('useIsFetching', () => {
     const isFetchings: number[] = []
 
     function One() {
-      useQuery(key1, async () => {
-        await sleep(10)
-        return 'test'
+      useQuery({
+        queryKey: key1,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
       return null
     }
 
     function Two() {
-      useQuery(key2, async () => {
-        await sleep(20)
-        return 'test'
+      useQuery({
+        queryKey: key2,
+        queryFn: async () => {
+          await sleep(20)
+          return 'test'
+        },
       })
       return null
     }
 
     function Page() {
       const [started, setStarted] = React.useState(false)
-      const isFetching = useIsFetching(key1)
+      const isFetching = useIsFetching({ queryKey: key1 })
 
       isFetchings.push(isFetching)
 
@@ -164,101 +172,51 @@ describe('useIsFetching', () => {
     expect(isFetchings).toEqual(expect.not.arrayContaining([2]))
   })
 
-  describe('with custom context', () => {
-    it('should update as queries start and stop fetching', async () => {
-      const context = React.createContext<QueryClient | undefined>(undefined)
-
-      const queryCache = new QueryCache()
-      const queryClient = createQueryClient({ queryCache })
-      const key = queryKey()
-
-      function Page() {
-        const [ready, setReady] = React.useState(false)
-
-        const isFetching = useIsFetching(undefined, { context: context })
-
-        useQuery(
-          key,
-          async () => {
-            await sleep(50)
-            return 'test'
-          },
-          {
-            enabled: ready,
-            context,
-          },
-        )
-
-        return (
-          <div>
-            <div>isFetching: {isFetching}</div>
-            <button onClick={() => setReady(true)}>setReady</button>
-          </div>
-        )
-      }
+  it('should show the correct fetching state when mounted after a query', async () => {
+    const queryClient = createQueryClient()
+    const key = queryKey()
 
-      const { findByText, getByRole } = renderWithClient(
-        queryClient,
-        <Page />,
-        {
-          context,
+    function Page() {
+      useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
         },
-      )
-
-      await findByText('isFetching: 0')
-      fireEvent.click(getByRole('button', { name: /setReady/i }))
-      await findByText('isFetching: 1')
-      await findByText('isFetching: 0')
-    })
-
-    it('should throw if the context is not passed to useIsFetching', async () => {
-      const context = React.createContext<QueryClient | undefined>(undefined)
-
-      const queryCache = new QueryCache()
-      const queryClient = createQueryClient({ queryCache })
-      const key = queryKey()
-
-      function Page() {
-        const isFetching = useIsFetching()
-
-        useQuery(key, async () => 'test', {
-          enabled: true,
-          context,
-          useErrorBoundary: true,
-        })
+      })
 
-        return (
-          <div>
-            <div>isFetching: {isFetching}</div>
-          </div>
-        )
-      }
+      const isFetching = useIsFetching()
 
-      const rendered = renderWithClient(
-        queryClient,
-        <ErrorBoundary fallbackRender={() => <div>error boundary</div>}>
-          <Page />
-        </ErrorBoundary>,
-        {
-          context,
-        },
+      return (
+        <div>
+          <div>isFetching: {isFetching}</div>
+        </div>
       )
+    }
 
-      await waitFor(() => rendered.getByText('error boundary'))
-    })
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await rendered.findByText('isFetching: 1')
+    await rendered.findByText('isFetching: 0')
   })
 
-  it('should show the correct fetching state when mounted after a query', async () => {
+  it('should use provided custom queryClient', async () => {
     const queryClient = createQueryClient()
     const key = queryKey()
 
     function Page() {
-      useQuery(key, async () => {
-        await sleep(10)
-        return 'test'
-      })
+      useQuery(
+        {
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(10)
+            return 'test'
+          },
+        },
+        queryClient,
+      )
 
-      const isFetching = useIsFetching()
+      const isFetching = useIsFetching({}, queryClient)
 
       return (
         <div>
@@ -267,9 +225,8 @@ describe('useIsFetching', () => {
       )
     }
 
-    const rendered = renderWithClient(queryClient, <Page />)
+    const rendered = render(<Page></Page>)
 
-    await rendered.findByText('isFetching: 1')
-    await rendered.findByText('isFetching: 0')
+    await waitFor(() => rendered.getByText('isFetching: 1'))
   })
 })