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

package/src/__tests__/ssr-hydration.test.tsx

@@ -14,23 +14,14 @@ import {
 } from '..'
 import { createQueryClient, setIsServer, sleep } from './utils'
 
-const isReact18 = () => (process.env.REACTJS_VERSION || '18') === '18'
-
 const ReactHydrate = (element: React.ReactElement, container: Element) => {
-  if (isReact18()) {
-    let root: any
-    ReactDOMTestUtils.act(() => {
-      // @ts-expect-error
-      root = ReactDOM.hydrateRoot(container, element)
-    })
-    return () => {
-      root.unmount()
-    }
-  }
-
-  ReactDOM.hydrate(element, container)
+  let root: any
+  ReactDOMTestUtils.act(() => {
+    // @ts-expect-error
+    root = ReactDOM.hydrateRoot(container, element)
+  })
   return () => {
-    ReactDOM.unmountComponentAtNode(container)
+    root.unmount()
   }
 }
 
@@ -58,9 +49,6 @@ describe('Server side rendering with de/rehydration', () => {
     const consoleMock = jest.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
 
-    if (!isReact18()) {
-      return
-    }
     const fetchDataSuccess = jest.fn<
       ReturnType<typeof fetchData>,
       Parameters<typeof fetchData>
@@ -68,7 +56,10 @@ describe('Server side rendering with de/rehydration', () => {
 
     // -- Shared part --
     function SuccessComponent() {
-      const result = useQuery(['success'], () => fetchDataSuccess('success!'))
+      const result = useQuery({
+        queryKey: ['success'],
+        queryFn: () => fetchDataSuccess('success!'),
+      })
       return (
         <PrintStateComponent componentName="SuccessComponent" result={result} />
       )
@@ -81,9 +72,10 @@ describe('Server side rendering with de/rehydration', () => {
     const prefetchClient = createQueryClient({
       queryCache: prefetchCache,
     })
-    await prefetchClient.prefetchQuery(['success'], () =>
-      fetchDataSuccess('success'),
-    )
+    await prefetchClient.prefetchQuery({
+      queryKey: ['success'],
+      queryFn: () => fetchDataSuccess('success'),
+    })
     const dehydratedStateServer = dehydrate(prefetchClient)
     const renderCache = new QueryCache()
     const renderClient = createQueryClient({
@@ -138,16 +130,15 @@ describe('Server side rendering with de/rehydration', () => {
     const consoleMock = jest.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
 
-    if (!isReact18()) {
-      return
-    }
     const fetchDataError = jest.fn(() => {
       throw new Error('fetchDataError')
     })
 
     // -- Shared part --
     function ErrorComponent() {
-      const result = useQuery(['error'], () => fetchDataError(), {
+      const result = useQuery({
+        queryKey: ['error'],
+        queryFn: () => fetchDataError(),
         retry: false,
       })
       return (
@@ -161,7 +152,10 @@ describe('Server side rendering with de/rehydration', () => {
     const prefetchClient = createQueryClient({
       queryCache: prefetchCache,
     })
-    await prefetchClient.prefetchQuery(['error'], () => fetchDataError())
+    await prefetchClient.prefetchQuery({
+      queryKey: ['error'],
+      queryFn: () => fetchDataError(),
+    })
     const dehydratedStateServer = dehydrate(prefetchClient)
     const renderCache = new QueryCache()
     const renderClient = createQueryClient({
@@ -178,7 +172,7 @@ describe('Server side rendering with de/rehydration', () => {
     setIsServer(false)
 
     const expectedMarkup =
-      'ErrorComponent - status:loading fetching:true data:undefined'
+      'ErrorComponent - status:pending fetching:true data:undefined'
 
     expect(markup).toBe(expectedMarkup)
 
@@ -216,9 +210,6 @@ describe('Server side rendering with de/rehydration', () => {
     const consoleMock = jest.spyOn(console, 'error')
     consoleMock.mockImplementation(() => undefined)
 
-    if (!isReact18()) {
-      return
-    }
     const fetchDataSuccess = jest.fn<
       ReturnType<typeof fetchData>,
       Parameters<typeof fetchData>
@@ -226,7 +217,10 @@ describe('Server side rendering with de/rehydration', () => {
 
     // -- Shared part --
     function SuccessComponent() {
-      const result = useQuery(['success'], () => fetchDataSuccess('success!'))
+      const result = useQuery({
+        queryKey: ['success'],
+        queryFn: () => fetchDataSuccess('success!'),
+      })
       return (
         <PrintStateComponent componentName="SuccessComponent" result={result} />
       )
@@ -249,7 +243,7 @@ describe('Server side rendering with de/rehydration', () => {
     setIsServer(false)
 
     const expectedMarkup =
-      'SuccessComponent - status:loading fetching:true data:undefined'
+      'SuccessComponent - status:pending fetching:true data:undefined'
 
     expect(markup).toBe(expectedMarkup)
 

package/src/__tests__/ssr.test.tsx

@@ -17,7 +17,7 @@ describe('Server Side Rendering', () => {
     const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
 
     function Page() {
-      const query = useQuery(key, queryFn)
+      const query = useQuery({ queryKey: key, queryFn })
 
       const content = `status ${query.status}`
 
@@ -34,7 +34,7 @@ describe('Server Side Rendering', () => {
       </QueryClientProvider>,
     )
 
-    expect(markup).toContain('status loading')
+    expect(markup).toContain('status pending')
     expect(queryFn).toHaveBeenCalledTimes(0)
     queryCache.clear()
   })
@@ -44,9 +44,12 @@ describe('Server Side Rendering', () => {
     const queryClient = createQueryClient({ queryCache })
     const key = queryKey()
     const fetchFn = () => Promise.resolve('data')
-    const data = await queryClient.fetchQuery(key, fetchFn)
+    const data = await queryClient.fetchQuery({
+      queryKey: key,
+      queryFn: fetchFn,
+    })
     expect(data).toBe('data')
-    expect(queryCache.find(key)?.state.data).toBe('data')
+    expect(queryCache.find({ queryKey: key })?.state.data).toBe('data')
     queryCache.clear()
   })
 
@@ -60,7 +63,7 @@ describe('Server Side Rendering', () => {
     })
 
     function Page() {
-      const query = useQuery(key, queryFn)
+      const query = useQuery({ queryKey: key, queryFn })
 
       const content = `status ${query.status}`
 
@@ -71,7 +74,7 @@ describe('Server Side Rendering', () => {
       )
     }
 
-    await queryClient.prefetchQuery(key, queryFn)
+    await queryClient.prefetchQuery({ queryKey: key, queryFn })
 
     const markup = renderToString(
       <QueryClientProvider client={queryClient}>
@@ -92,7 +95,9 @@ describe('Server Side Rendering', () => {
 
     function Page() {
       const [page, setPage] = React.useState(1)
-      const { data } = useQuery([key, page], async () => page, {
+      const { data } = useQuery({
+        queryKey: [key, page],
+        queryFn: async () => page,
         initialData: 1,
       })
 
@@ -126,7 +131,12 @@ describe('Server Side Rendering', () => {
     })
 
     function Page() {
-      const query = useInfiniteQuery(key, queryFn)
+      const query = useInfiniteQuery({
+        queryKey: key,
+        queryFn,
+        getNextPageParam: () => undefined,
+        defaultPageParam: 0,
+      })
       return (
         <ul>
           {query.data?.pages.map((page) => (
@@ -136,7 +146,11 @@ describe('Server Side Rendering', () => {
       )
     }
 
-    await queryClient.prefetchInfiniteQuery(key, queryFn)
+    await queryClient.prefetchInfiniteQuery({
+      queryKey: key,
+      queryFn,
+      defaultPageParam: 0,
+    })
 
     const markup = renderToString(
       <QueryClientProvider client={queryClient}>