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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.24.10",
+  "version": "5.0.0-alpha.1",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -21,37 +21,25 @@
     },
     "./package.json": "./package.json"
   },
-  "sideEffects": [
-    "./src/setBatchUpdatesFn.ts"
-  ],
+  "sideEffects": false,
   "files": [
     "build/lib/*",
     "build/umd/*",
-    "src",
-    "codemods",
-    "!codemods/jest.config.js",
-    "!codemods/**/__testfixtures__",
-    "!codemods/**/__tests__"
+    "src"
   ],
   "devDependencies": {
-    "@types/jscodeshift": "^0.11.3",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
-    "@types/use-sync-external-store": "^0.0.3",
     "react": "^18.2.0",
-    "react-17": "npm:react@^17.0.2",
     "react-dom": "^18.2.0",
-    "react-dom-17": "npm:react-dom@^17.0.2",
-    "jscodeshift": "^0.13.1",
     "react-error-boundary": "^3.1.4"
   },
   "dependencies": {
-    "use-sync-external-store": "^1.2.0",
-    "@tanstack/query-core": "4.24.10"
+    "@tanstack/query-core": "5.0.0-alpha.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-native": "*"
   },
   "peerDependenciesMeta": {

package/src/{Hydrate.tsx → HydrationBoundary.tsx}

@@ -1,16 +1,24 @@
 'use client'
 import * as React from 'react'
 
-import type { HydrateOptions } from '@tanstack/query-core'
+import type { HydrateOptions, QueryClient } from '@tanstack/query-core'
 import { hydrate } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
-import type { ContextOptions } from './types'
 
-export function useHydrate(
-  state: unknown,
-  options: HydrateOptions & ContextOptions = {},
-) {
-  const queryClient = useQueryClient({ context: options.context })
+export interface HydrationBoundaryProps {
+  state?: unknown
+  options?: HydrateOptions
+  children?: React.ReactNode
+  queryClient?: QueryClient
+}
+
+export const HydrationBoundary = ({
+  children,
+  options = {},
+  state,
+  queryClient,
+}: HydrationBoundaryProps) => {
+  const client = useQueryClient(queryClient)
 
   const optionsRef = React.useRef(options)
   optionsRef.current = options
@@ -21,18 +29,9 @@ export function useHydrate(
   // hydrate can and should be run *during* render here for SSR to work properly
   React.useMemo(() => {
     if (state) {
-      hydrate(queryClient, state, optionsRef.current)
+      hydrate(client, state, optionsRef.current)
     }
-  }, [queryClient, state])
-}
-
-export interface HydrateProps {
-  state?: unknown
-  options?: HydrateOptions
-  children?: React.ReactNode
-}
+  }, [client, state])
 
-export const Hydrate = ({ children, options, state }: HydrateProps) => {
-  useHydrate(state, options)
   return children as React.ReactElement
 }

package/src/QueryClientProvider.tsx

@@ -2,77 +2,33 @@
 import * as React from 'react'
 
 import type { QueryClient } from '@tanstack/query-core'
-import type { ContextOptions } from './types'
 
-declare global {
-  interface Window {
-    ReactQueryClientContext?: React.Context<QueryClient | undefined>
-  }
-}
-
-export const defaultContext = React.createContext<QueryClient | undefined>(
+export const QueryClientContext = React.createContext<QueryClient | undefined>(
   undefined,
 )
-const QueryClientSharingContext = React.createContext<boolean>(false)
 
-// If we are given a context, we will use it.
-// Otherwise, if contextSharing is on, we share the first and at least one
-// instance of the context across the window
-// to ensure that if React Query is used across
-// different bundles or microfrontends they will
-// all use the same **instance** of context, regardless
-// of module scoping.
-function getQueryClientContext(
-  context: React.Context<QueryClient | undefined> | undefined,
-  contextSharing: boolean,
-) {
-  if (context) {
-    return context
-  }
-  if (contextSharing && typeof window !== 'undefined') {
-    if (!window.ReactQueryClientContext) {
-      window.ReactQueryClientContext = defaultContext
-    }
+export const useQueryClient = (queryClient?: QueryClient) => {
+  const client = React.useContext(QueryClientContext)
 
-    return window.ReactQueryClientContext
+  if (queryClient) {
+    return queryClient
   }
 
-  return defaultContext
-}
-
-export const useQueryClient = ({ context }: ContextOptions = {}) => {
-  const queryClient = React.useContext(
-    getQueryClientContext(context, React.useContext(QueryClientSharingContext)),
-  )
-
-  if (!queryClient) {
+  if (!client) {
     throw new Error('No QueryClient set, use QueryClientProvider to set one')
   }
 
-  return queryClient
+  return client
 }
 
-type QueryClientProviderPropsBase = {
+export type QueryClientProviderProps = {
   client: QueryClient
   children?: React.ReactNode
 }
-type QueryClientProviderPropsWithContext = ContextOptions & {
-  contextSharing?: never
-} & QueryClientProviderPropsBase
-type QueryClientProviderPropsWithContextSharing = {
-  context?: never
-  contextSharing?: boolean
-} & QueryClientProviderPropsBase
-
-export type QueryClientProviderProps =
-  | QueryClientProviderPropsWithContext
-  | QueryClientProviderPropsWithContextSharing
 
 export const QueryClientProvider = ({
   client,
   children,
-  context,
-  contextSharing = false,
 }: QueryClientProviderProps): JSX.Element => {
   React.useEffect(() => {
     client.mount()
@@ -81,19 +37,9 @@ export const QueryClientProvider = ({
     }
   }, [client])
 
-  if (process.env.NODE_ENV !== 'production' && contextSharing) {
-    client
-      .getLogger()
-      .error(
-        `The contextSharing option has been deprecated and will be removed in the next major version`,
-      )
-  }
-
-  const Context = getQueryClientContext(context, contextSharing)
-
   return (
-    <QueryClientSharingContext.Provider value={!context && contextSharing}>
-      <Context.Provider value={client}>{children}</Context.Provider>
-    </QueryClientSharingContext.Provider>
+    <QueryClientContext.Provider value={client}>
+      {children}
+    </QueryClientContext.Provider>
   )
 }

package/src/__tests__/{Hydrate.test.tsx → HydrationBoundary.test.tsx}

@@ -7,8 +7,7 @@ import {
   QueryCache,
   useQuery,
   dehydrate,
-  useHydrate,
-  Hydrate,
+  HydrationBoundary,
 } from '@tanstack/react-query'
 import { createQueryClient, sleep } from './utils'
 import * as coreModule from '@tanstack/query-core'
@@ -23,78 +22,81 @@ describe('React hydration', () => {
   beforeAll(async () => {
     const queryCache = new QueryCache()
     const queryClient = createQueryClient({ queryCache })
-    await queryClient.prefetchQuery(['string'], () =>
-      dataQuery(['stringCached']),
-    )
+    await queryClient.prefetchQuery({
+      queryKey: ['string'],
+      queryFn: () => dataQuery(['stringCached']),
+    })
     const dehydrated = dehydrate(queryClient)
     stringifiedState = JSON.stringify(dehydrated)
     queryClient.clear()
   })
 
-  describe('useHydrate', () => {
-    test('should hydrate queries to the cache on context', async () => {
-      const dehydratedState = JSON.parse(stringifiedState)
-      const queryCache = new QueryCache()
-      const queryClient = createQueryClient({ queryCache })
-
-      function Page() {
-        useHydrate(dehydratedState)
-        const { data } = useQuery(['string'], () => dataQuery(['string']))
-        return (
-          <div>
-            <h1>{data}</h1>
-          </div>
-        )
-      }
+  test('should hydrate queries to the cache on context', async () => {
+    const dehydratedState = JSON.parse(stringifiedState)
+    const queryCache = new QueryCache()
+    const queryClient = createQueryClient({ queryCache })
 
-      const rendered = render(
-        <QueryClientProvider client={queryClient}>
-          <Page />
-        </QueryClientProvider>,
+    function Page() {
+      const { data } = useQuery({
+        queryKey: ['string'],
+        queryFn: () => dataQuery(['string']),
+      })
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
       )
+    }
 
-      await rendered.findByText('stringCached')
-      await rendered.findByText('string')
-      queryClient.clear()
-    })
+    const rendered = render(
+      <QueryClientProvider client={queryClient}>
+        <HydrationBoundary state={dehydratedState}>
+          <Page />
+        </HydrationBoundary>
+      </QueryClientProvider>,
+    )
 
-    test('should hydrate queries to the cache on custom context', async () => {
-      const context = React.createContext<QueryClient | undefined>(undefined)
+    await rendered.findByText('stringCached')
+    await rendered.findByText('string')
+    queryClient.clear()
+  })
 
-      const queryCacheOuter = new QueryCache()
-      const queryCacheInner = new QueryCache()
+  test('should hydrate queries to the cache on custom context', async () => {
+    const queryCacheOuter = new QueryCache()
+    const queryCacheInner = new QueryCache()
 
-      const queryClientInner = new QueryClient({ queryCache: queryCacheInner })
-      const queryClientOuter = new QueryClient({ queryCache: queryCacheOuter })
+    const queryClientInner = new QueryClient({ queryCache: queryCacheInner })
+    const queryClientOuter = new QueryClient({ queryCache: queryCacheOuter })
 
-      const dehydratedState = JSON.parse(stringifiedState)
+    const dehydratedState = JSON.parse(stringifiedState)
 
-      function Page() {
-        useHydrate(dehydratedState, { context })
-        const { data } = useQuery(['string'], () => dataQuery(['string']), {
-          context,
-        })
-        return (
-          <div>
-            <h1>{data}</h1>
-          </div>
-        )
-      }
+    function Page() {
+      const { data } = useQuery({
+        queryKey: ['string'],
+        queryFn: () => dataQuery(['string']),
+      })
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
+      )
+    }
 
-      const rendered = render(
-        <QueryClientProvider client={queryClientOuter} context={context}>
-          <QueryClientProvider client={queryClientInner}>
+    const rendered = render(
+      <QueryClientProvider client={queryClientOuter}>
+        <QueryClientProvider client={queryClientInner}>
+          <HydrationBoundary state={dehydratedState}>
             <Page />
-          </QueryClientProvider>
-        </QueryClientProvider>,
-      )
+          </HydrationBoundary>
+        </QueryClientProvider>
+      </QueryClientProvider>,
+    )
 
-      await rendered.findByText('stringCached')
-      await rendered.findByText('string')
+    await rendered.findByText('stringCached')
+    await rendered.findByText('string')
 
-      queryClientInner.clear()
-      queryClientOuter.clear()
-    })
+    queryClientInner.clear()
+    queryClientOuter.clear()
   })
 
   describe('ReactQueryCacheProvider with hydration support', () => {
@@ -104,7 +106,10 @@ describe('React hydration', () => {
       const queryClient = createQueryClient({ queryCache })
 
       function Page({ queryKey }: { queryKey: [string] }) {
-        const { data } = useQuery(queryKey, () => dataQuery(queryKey))
+        const { data } = useQuery({
+          queryKey,
+          queryFn: () => dataQuery(queryKey),
+        })
         return (
           <div>
             <h1>{data}</h1>
@@ -114,9 +119,9 @@ describe('React hydration', () => {
 
       const rendered = render(
         <QueryClientProvider client={queryClient}>
-          <Hydrate state={dehydratedState}>
+          <HydrationBoundary state={dehydratedState}>
             <Page queryKey={['string']} />
-          </Hydrate>
+          </HydrationBoundary>
         </QueryClientProvider>,
       )
 
@@ -126,21 +131,23 @@ describe('React hydration', () => {
       const intermediateClient = createQueryClient({
         queryCache: intermediateCache,
       })
-      await intermediateClient.prefetchQuery(['string'], () =>
-        dataQuery(['should change']),
-      )
-      await intermediateClient.prefetchQuery(['added string'], () =>
-        dataQuery(['added string']),
-      )
+      await intermediateClient.prefetchQuery({
+        queryKey: ['string'],
+        queryFn: () => dataQuery(['should change']),
+      })
+      await intermediateClient.prefetchQuery({
+        queryKey: ['added string'],
+        queryFn: () => dataQuery(['added string']),
+      })
       const dehydrated = dehydrate(intermediateClient)
       intermediateClient.clear()
 
       rendered.rerender(
         <QueryClientProvider client={queryClient}>
-          <Hydrate state={dehydrated}>
+          <HydrationBoundary state={dehydrated}>
             <Page queryKey={['string']} />
             <Page queryKey={['added string']} />
-          </Hydrate>
+          </HydrationBoundary>
         </QueryClientProvider>,
       )
 
@@ -160,7 +167,10 @@ describe('React hydration', () => {
       const queryClient = createQueryClient({ queryCache })
 
       function Page() {
-        const { data } = useQuery(['string'], () => dataQuery(['string']))
+        const { data } = useQuery({
+          queryKey: ['string'],
+          queryFn: () => dataQuery(['string']),
+        })
         return (
           <div>
             <h1>{data}</h1>
@@ -170,9 +180,9 @@ describe('React hydration', () => {
 
       const rendered = render(
         <QueryClientProvider client={queryClient}>
-          <Hydrate state={dehydratedState}>
+          <HydrationBoundary state={dehydratedState}>
             <Page />
-          </Hydrate>
+          </HydrationBoundary>
         </QueryClientProvider>,
       )
 
@@ -185,9 +195,9 @@ describe('React hydration', () => {
 
       rendered.rerender(
         <QueryClientProvider client={newClientQueryClient}>
-          <Hydrate state={dehydratedState}>
+          <HydrationBoundary state={dehydratedState}>
             <Page />
-          </Hydrate>
+          </HydrationBoundary>
         </QueryClientProvider>,
       )
 
@@ -206,13 +216,14 @@ describe('React hydration', () => {
     const hydrateSpy = jest.spyOn(coreModule, 'hydrate')
 
     function Page() {
-      useHydrate(null)
       return null
     }
 
     render(
       <QueryClientProvider client={queryClient}>
-        <Page />
+        <HydrationBoundary state={null}>
+          <Page />
+        </HydrationBoundary>
       </QueryClientProvider>,
     )
 
@@ -229,13 +240,14 @@ describe('React hydration', () => {
     const hydrateSpy = jest.spyOn(coreModule, 'hydrate')
 
     function Page() {
-      useHydrate(undefined)
       return null
     }
 
     render(
       <QueryClientProvider client={queryClient}>
-        <Page />
+        <HydrationBoundary state={undefined}>
+          <Page />
+        </HydrationBoundary>
       </QueryClientProvider>,
     )