@tanstack/react-query 4.0.5

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@tanstack/react-query",
+  "version": "4.0.5",
+  "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/query",
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "module": "build/esm/index.js",
+  "main": "build/cjs/react-query/src/index.js",
+  "browser": "build/umd/index.production.js",
+  "types": "build/types/packages/react-query/src/index.d.ts",
+  "sideEffects": [
+    "lib/index.js",
+    "lib/index.mjs",
+    "lib/reactjs/index.js",
+    "lib/reactjs/index.mjs",
+    "lib/reactjs/setBatchUpdatesFn.js",
+    "lib/reactjs/setBatchUpdatesFn.mjs"
+  ],
+  "scripts": {
+    "test:codemods": "../../node_modules/.bin/jest --config codemods/jest.config.js",
+    "test:eslint": "../../node_modules/.bin/eslint --ext .ts,.tsx ./src",
+    "test:jest": "yarn test:codemods && ../../node_modules/.bin/jest --config jest.config.js",
+    "test:jest:dev": "yarn test:jest --watch",
+    "compile": "../../node_modules/.bin/tsc -p tsconfig.json --noEmit --emitDeclarationOnly false"
+  },
+  "files": [
+    "build/*",
+    "src",
+    "codemods",
+    "!codemods/jest.config.js",
+    "!codemods/**/__testfixtures__",
+    "!codemods/**/__tests__"
+  ],
+  "devDependencies": {
+    "@types/jscodeshift": "^0.11.3",
+    "jscodeshift": "^0.13.1",
+    "react-error-boundary": "^3.1.4"
+  },
+  "dependencies": {
+    "@tanstack/query-core": "^4.0.0-beta.1",
+    "@types/use-sync-external-store": "^0.0.3",
+    "use-sync-external-store": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
+  }
+}

package/src/Hydrate.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+
+import { hydrate, HydrateOptions } from '@tanstack/query-core'
+import { useQueryClient } from './QueryClientProvider'
+import { ContextOptions } from './types'
+
+export function useHydrate(
+  state: unknown,
+  options: HydrateOptions & ContextOptions = {},
+) {
+  const queryClient = useQueryClient({ context: options.context })
+
+  const optionsRef = React.useRef(options)
+  optionsRef.current = options
+
+  // Running hydrate again with the same queries is safe,
+  // it wont overwrite or initialize existing queries,
+  // relying on useMemo here is only a performance optimization.
+  // hydrate can and should be run *during* render here for SSR to work properly
+  React.useMemo(() => {
+    if (state) {
+      hydrate(queryClient, state, optionsRef.current)
+    }
+  }, [queryClient, state])
+}
+
+export interface HydrateProps {
+  state?: unknown
+  options?: HydrateOptions
+  children?: React.ReactNode
+}
+
+export const Hydrate = ({ children, options, state }: HydrateProps) => {
+  useHydrate(state, options)
+  return children as React.ReactElement
+}

package/src/QueryClientProvider.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react'
+
+import { QueryClient } from '@tanstack/query-core'
+import { ContextOptions } from './types'
+
+declare global {
+  interface Window {
+    ReactQueryClientContext?: React.Context<QueryClient | undefined>
+  }
+}
+
+export const defaultContext = 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
+    }
+
+    return window.ReactQueryClientContext
+  }
+
+  return defaultContext
+}
+
+export const useQueryClient = ({ context }: ContextOptions = {}) => {
+  const queryClient = React.useContext(
+    getQueryClientContext(context, React.useContext(QueryClientSharingContext)),
+  )
+
+  if (!queryClient) {
+    throw new Error('No QueryClient set, use QueryClientProvider to set one')
+  }
+
+  return queryClient
+}
+
+type QueryClientProviderPropsBase = {
+  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()
+    return () => {
+      client.unmount()
+    }
+  }, [client])
+
+  const Context = getQueryClientContext(context, contextSharing)
+
+  return (
+    <QueryClientSharingContext.Provider value={!context && contextSharing}>
+      <Context.Provider value={client}>{children}</Context.Provider>
+    </QueryClientSharingContext.Provider>
+  )
+}

package/src/QueryErrorResetBoundary.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+
+// CONTEXT
+
+interface QueryErrorResetBoundaryValue {
+  clearReset: () => void
+  isReset: () => boolean
+  reset: () => void
+}
+
+function createValue(): QueryErrorResetBoundaryValue {
+  let isReset = false
+  return {
+    clearReset: () => {
+      isReset = false
+    },
+    reset: () => {
+      isReset = true
+    },
+    isReset: () => {
+      return isReset
+    },
+  }
+}
+
+const QueryErrorResetBoundaryContext = React.createContext(createValue())
+
+// HOOK
+
+export const useQueryErrorResetBoundary = () =>
+  React.useContext(QueryErrorResetBoundaryContext)
+
+// COMPONENT
+
+export interface QueryErrorResetBoundaryProps {
+  children:
+    | ((value: QueryErrorResetBoundaryValue) => React.ReactNode)
+    | React.ReactNode
+}
+
+export const QueryErrorResetBoundary = ({
+  children,
+}: QueryErrorResetBoundaryProps) => {
+  const [value] = React.useState(() => createValue())
+  return (
+    <QueryErrorResetBoundaryContext.Provider value={value}>
+      {typeof children === 'function'
+        ? (children as Function)(value)
+        : children}
+    </QueryErrorResetBoundaryContext.Provider>
+  )
+}

package/src/__tests__/Hydrate.test.tsx

@@ -0,0 +1,247 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryCache,
+  useQuery,
+  dehydrate,
+  useHydrate,
+  Hydrate,
+} from '@tanstack/react-query'
+import { createQueryClient, sleep } from '../../../../tests/utils'
+import * as coreModule from '@tanstack/query-core'
+
+describe('React hydration', () => {
+  const fetchData: (value: string) => Promise<string> = (value) =>
+    new Promise((res) => setTimeout(() => res(value), 10))
+  const dataQuery: (key: [string]) => Promise<string> = (key) =>
+    fetchData(key[0])
+  let stringifiedState: string
+
+  beforeAll(async () => {
+    const queryCache = new QueryCache()
+    const queryClient = createQueryClient({ queryCache })
+    await queryClient.prefetchQuery(['string'], () =>
+      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>
+        )
+      }
+
+      const rendered = render(
+        <QueryClientProvider client={queryClient}>
+          <Page />
+        </QueryClientProvider>,
+      )
+
+      await rendered.findByText('stringCached')
+      await rendered.findByText('string')
+      queryClient.clear()
+    })
+
+    test('should hydrate queries to the cache on custom context', async () => {
+      const context = React.createContext<QueryClient | undefined>(undefined)
+
+      const queryCacheOuter = new QueryCache()
+      const queryCacheInner = new QueryCache()
+
+      const queryClientInner = new QueryClient({ queryCache: queryCacheInner })
+      const queryClientOuter = new QueryClient({ queryCache: queryCacheOuter })
+
+      const dehydratedState = JSON.parse(stringifiedState)
+
+      function Page() {
+        useHydrate(dehydratedState, { context })
+        const { data } = useQuery(['string'], () => dataQuery(['string']), {
+          context,
+        })
+        return (
+          <div>
+            <h1>{data}</h1>
+          </div>
+        )
+      }
+
+      const rendered = render(
+        <QueryClientProvider client={queryClientOuter} context={context}>
+          <QueryClientProvider client={queryClientInner}>
+            <Page />
+          </QueryClientProvider>
+        </QueryClientProvider>,
+      )
+
+      await rendered.findByText('stringCached')
+      await rendered.findByText('string')
+
+      queryClientInner.clear()
+      queryClientOuter.clear()
+    })
+  })
+
+  describe('ReactQueryCacheProvider with hydration support', () => {
+    test('should hydrate new queries if queries change', async () => {
+      const dehydratedState = JSON.parse(stringifiedState)
+      const queryCache = new QueryCache()
+      const queryClient = createQueryClient({ queryCache })
+
+      function Page({ queryKey }: { queryKey: [string] }) {
+        const { data } = useQuery(queryKey, () => dataQuery(queryKey))
+        return (
+          <div>
+            <h1>{data}</h1>
+          </div>
+        )
+      }
+
+      const rendered = render(
+        <QueryClientProvider client={queryClient}>
+          <Hydrate state={dehydratedState}>
+            <Page queryKey={['string']} />
+          </Hydrate>
+        </QueryClientProvider>,
+      )
+
+      await rendered.findByText('string')
+
+      const intermediateCache = new QueryCache()
+      const intermediateClient = createQueryClient({
+        queryCache: intermediateCache,
+      })
+      await intermediateClient.prefetchQuery(['string'], () =>
+        dataQuery(['should change']),
+      )
+      await intermediateClient.prefetchQuery(['added string'], () =>
+        dataQuery(['added string']),
+      )
+      const dehydrated = dehydrate(intermediateClient)
+      intermediateClient.clear()
+
+      rendered.rerender(
+        <QueryClientProvider client={queryClient}>
+          <Hydrate state={dehydrated}>
+            <Page queryKey={['string']} />
+            <Page queryKey={['added string']} />
+          </Hydrate>
+        </QueryClientProvider>,
+      )
+
+      // Existing query data should be overwritten if older,
+      // so this should have changed
+      await sleep(10)
+      rendered.getByText('should change')
+      // New query data should be available immediately
+      rendered.getByText('added string')
+
+      queryClient.clear()
+    })
+
+    test('should hydrate queries to new cache if cache changes', async () => {
+      const dehydratedState = JSON.parse(stringifiedState)
+      const queryCache = new QueryCache()
+      const queryClient = createQueryClient({ queryCache })
+
+      function Page() {
+        const { data } = useQuery(['string'], () => dataQuery(['string']))
+        return (
+          <div>
+            <h1>{data}</h1>
+          </div>
+        )
+      }
+
+      const rendered = render(
+        <QueryClientProvider client={queryClient}>
+          <Hydrate state={dehydratedState}>
+            <Page />
+          </Hydrate>
+        </QueryClientProvider>,
+      )
+
+      await rendered.findByText('string')
+
+      const newClientQueryCache = new QueryCache()
+      const newClientQueryClient = createQueryClient({
+        queryCache: newClientQueryCache,
+      })
+
+      rendered.rerender(
+        <QueryClientProvider client={newClientQueryClient}>
+          <Hydrate state={dehydratedState}>
+            <Page />
+          </Hydrate>
+        </QueryClientProvider>,
+      )
+
+      await sleep(10)
+      rendered.getByText('string')
+
+      queryClient.clear()
+      newClientQueryClient.clear()
+    })
+  })
+
+  test('should not hydrate queries if state is null', async () => {
+    const queryCache = new QueryCache()
+    const queryClient = createQueryClient({ queryCache })
+
+    const hydrateSpy = jest.spyOn(coreModule, 'hydrate')
+
+    function Page() {
+      useHydrate(null)
+      return null
+    }
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>,
+    )
+
+    expect(hydrateSpy).toHaveBeenCalledTimes(0)
+
+    hydrateSpy.mockRestore()
+    queryClient.clear()
+  })
+
+  test('should not hydrate queries if state is undefined', async () => {
+    const queryCache = new QueryCache()
+    const queryClient = createQueryClient({ queryCache })
+
+    const hydrateSpy = jest.spyOn(coreModule, 'hydrate')
+
+    function Page() {
+      useHydrate(undefined)
+      return null
+    }
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>,
+    )
+
+    expect(hydrateSpy).toHaveBeenCalledTimes(0)
+
+    hydrateSpy.mockRestore()
+    queryClient.clear()
+  })
+})