@tanstack/react-query 4.0.5

package/src/__tests__/useQuery.types.test.tsx

@@ -0,0 +1,157 @@
+import { useQuery } from '../useQuery'
+
+export type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <
+  T,
+>() => T extends Y ? 1 : 2
+  ? true
+  : false
+
+export type Expect<T extends true> = T
+
+const doNotExecute = (_func: () => void) => true
+
+describe('initialData', () => {
+  describe('Config object overload', () => {
+    it('TData should always be defined when initialData is provided as an object', () => {
+      doNotExecute(() => {
+        const { data } = useQuery({
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
+          initialData: {
+            wow: true,
+          },
+        })
+
+        const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
+        return result
+      })
+    })
+
+    it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => {
+      doNotExecute(() => {
+        const { data } = useQuery({
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
+          initialData: () => ({
+            wow: true,
+          }),
+        })
+
+        const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
+        return result
+      })
+    })
+
+    it('TData should have undefined in the union when initialData is NOT provided', () => {
+      doNotExecute(() => {
+        const { data } = useQuery({
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
+        })
+
+        const result: Expect<Equal<{ wow: boolean } | undefined, typeof data>> =
+          true
+        return result
+      })
+    })
+
+    it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
+      doNotExecute(() => {
+        const { data } = useQuery({
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
+          initialData: () => undefined as { wow: boolean } | undefined,
+        })
+
+        const result: Expect<Equal<{ wow: boolean } | undefined, typeof data>> =
+          true
+        return result
+      })
+    })
+  })
+
+  describe('Query key overload', () => {
+    it('TData should always be defined when initialData is provided', () => {
+      doNotExecute(() => {
+        const { data } = useQuery(['key'], {
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
+          initialData: {
+            wow: true,
+          },
+        })
+
+        const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
+        return result
+      })
+    })
+
+    it('TData should have undefined in the union when initialData is NOT provided', () => {
+      doNotExecute(() => {
+        const { data } = useQuery(['key'], {
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
+        })
+
+        const result: Expect<Equal<{ wow: boolean } | undefined, typeof data>> =
+          true
+        return result
+      })
+    })
+  })
+
+  describe('Query key and func', () => {
+    it('TData should always be defined when initialData is provided', () => {
+      doNotExecute(() => {
+        const { data } = useQuery(
+          ['key'],
+          () => {
+            return {
+              wow: true,
+            }
+          },
+          {
+            initialData: {
+              wow: true,
+            },
+          },
+        )
+
+        const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
+        return result
+      })
+    })
+
+    it('TData should have undefined in the union when initialData is NOT provided', () => {
+      doNotExecute(() => {
+        const { data } = useQuery(['key'], () => {
+          return {
+            wow: true,
+          }
+        })
+
+        const result: Expect<Equal<{ wow: boolean } | undefined, typeof data>> =
+          true
+        return result
+      })
+    })
+  })
+})

package/src/__tests__/utils.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { setActTimeout } from '../../../../tests/utils'
+import { QueryClient, ContextOptions, QueryClientProvider } from '..'
+
+export function renderWithClient(
+  client: QueryClient,
+  ui: React.ReactElement,
+  options: ContextOptions = {},
+): ReturnType<typeof render> {
+  const { rerender, ...result } = render(
+    <QueryClientProvider client={client} context={options.context}>
+      {ui}
+    </QueryClientProvider>,
+  )
+  return {
+    ...result,
+    rerender: (rerenderUi: React.ReactElement) =>
+      rerender(
+        <QueryClientProvider client={client} context={options.context}>
+          {rerenderUi}
+        </QueryClientProvider>,
+      ),
+  } as any
+}
+
+export const Blink = ({
+  duration,
+  children,
+}: {
+  duration: number
+  children: React.ReactNode
+}) => {
+  const [shouldShow, setShouldShow] = React.useState<boolean>(true)
+
+  React.useEffect(() => {
+    setShouldShow(true)
+    const timeout = setActTimeout(() => setShouldShow(false), duration)
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [duration, children])
+
+  return shouldShow ? <>{children}</> : <>off</>
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+// Side effects
+import './setBatchUpdatesFn'
+
+// Re-export core
+export * from '@tanstack/query-core'
+
+// React Query
+export * from './types'
+export { useQueries } from './useQueries'
+export type { QueriesResults, QueriesOptions } from './useQueries'
+export { useQuery } from './useQuery'
+export {
+  defaultContext,
+  QueryClientProvider,
+  useQueryClient,
+} from './QueryClientProvider'
+export type { QueryClientProviderProps } from './QueryClientProvider'
+export type { QueryErrorResetBoundaryProps } from './QueryErrorResetBoundary'
+export { useHydrate, Hydrate } from './Hydrate'
+export type { HydrateProps } from './Hydrate'
+export {
+  QueryErrorResetBoundary,
+  useQueryErrorResetBoundary,
+} from './QueryErrorResetBoundary'
+export { useIsFetching } from './useIsFetching'
+export { useIsMutating } from './useIsMutating'
+export { useMutation } from './useMutation'
+export { useInfiniteQuery } from './useInfiniteQuery'
+export { useIsRestoring, IsRestoringProvider } from './isRestoring'

package/src/isRestoring.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+
+const IsRestoringContext = React.createContext(false)
+
+export const useIsRestoring = () => React.useContext(IsRestoringContext)
+export const IsRestoringProvider = IsRestoringContext.Provider

package/src/reactBatchedUpdates.native.ts

@@ -0,0 +1,4 @@
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import { unstable_batchedUpdates } from 'react-native'
+export { unstable_batchedUpdates }

package/src/reactBatchedUpdates.ts

@@ -0,0 +1,2 @@
+import * as ReactDOM from 'react-dom'
+export const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates

package/src/setBatchUpdatesFn.ts

@@ -0,0 +1,4 @@
+import { notifyManager } from '@tanstack/query-core'
+import { unstable_batchedUpdates } from './reactBatchedUpdates'
+
+notifyManager.setBatchNotifyFunction(unstable_batchedUpdates)

package/src/types.ts

@@ -0,0 +1,122 @@
+import * as React from 'react'
+import {
+  InfiniteQueryObserverOptions,
+  InfiniteQueryObserverResult,
+  MutationObserverResult,
+  QueryObserverOptions,
+  QueryObserverResult,
+  QueryKey,
+  MutationObserverOptions,
+  MutateFunction,
+} from '@tanstack/query-core'
+import type { QueryClient } from '@tanstack/query-core'
+
+export interface ContextOptions {
+  /**
+   * Use this to pass your React Query context. Otherwise, `defaultContext` will be used.
+   */
+  context?: React.Context<QueryClient | undefined>
+}
+
+export interface UseBaseQueryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> extends ContextOptions,
+    QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey> {}
+
+export interface UseQueryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> extends UseBaseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey
+  > {}
+
+export interface UseInfiniteQueryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> extends ContextOptions,
+    InfiniteQueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey
+    > {}
+
+export type UseBaseQueryResult<
+  TData = unknown,
+  TError = unknown,
+> = QueryObserverResult<TData, TError>
+
+export type UseQueryResult<
+  TData = unknown,
+  TError = unknown,
+> = UseBaseQueryResult<TData, TError>
+
+export type DefinedUseQueryResult<TData = unknown, TError = unknown> = Omit<
+  UseQueryResult<TData, TError>,
+  'data'
+> & { data: TData }
+
+export type UseInfiniteQueryResult<
+  TData = unknown,
+  TError = unknown,
+> = InfiniteQueryObserverResult<TData, TError>
+
+export interface UseMutationOptions<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+> extends ContextOptions,
+    Omit<
+      MutationObserverOptions<TData, TError, TVariables, TContext>,
+      '_defaulted' | 'variables'
+    > {}
+
+export type UseMutateFunction<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+> = (
+  ...args: Parameters<MutateFunction<TData, TError, TVariables, TContext>>
+) => void
+
+export type UseMutateAsyncFunction<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown,
+> = MutateFunction<TData, TError, TVariables, TContext>
+
+export type UseBaseMutationResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = unknown,
+  TContext = unknown,
+> = Override<
+  MutationObserverResult<TData, TError, TVariables, TContext>,
+  { mutate: UseMutateFunction<TData, TError, TVariables, TContext> }
+> & { mutateAsync: UseMutateAsyncFunction<TData, TError, TVariables, TContext> }
+
+export type UseMutationResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = unknown,
+  TContext = unknown,
+> = UseBaseMutationResult<TData, TError, TVariables, TContext>
+
+type Override<A, B> = { [K in keyof A]: K extends keyof B ? B[K] : A[K] }

package/src/useBaseQuery.ts

@@ -0,0 +1,140 @@
+import * as React from 'react'
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
+
+import { QueryKey, notifyManager, QueryObserver } from '@tanstack/query-core'
+import { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'
+import { useQueryClient } from './QueryClientProvider'
+import { UseBaseQueryOptions } from './types'
+import { shouldThrowError } from './utils'
+import { useIsRestoring } from './isRestoring'
+
+export function useBaseQuery<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey extends QueryKey,
+>(
+  options: UseBaseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >,
+  Observer: typeof QueryObserver,
+) {
+  const queryClient = useQueryClient({ context: options.context })
+  const isRestoring = useIsRestoring()
+  const errorResetBoundary = useQueryErrorResetBoundary()
+  const defaultedOptions = queryClient.defaultQueryOptions(options)
+
+  // Make sure results are optimistically set in fetching state before subscribing or updating options
+  defaultedOptions._optimisticResults = isRestoring
+    ? 'isRestoring'
+    : 'optimistic'
+
+  // Include callbacks in batch renders
+  if (defaultedOptions.onError) {
+    defaultedOptions.onError = notifyManager.batchCalls(
+      defaultedOptions.onError,
+    )
+  }
+
+  if (defaultedOptions.onSuccess) {
+    defaultedOptions.onSuccess = notifyManager.batchCalls(
+      defaultedOptions.onSuccess,
+    )
+  }
+
+  if (defaultedOptions.onSettled) {
+    defaultedOptions.onSettled = notifyManager.batchCalls(
+      defaultedOptions.onSettled,
+    )
+  }
+
+  if (defaultedOptions.suspense) {
+    // Always set stale time when using suspense to prevent
+    // fetching again when directly mounting after suspending
+    if (typeof defaultedOptions.staleTime !== 'number') {
+      defaultedOptions.staleTime = 1000
+    }
+  }
+
+  if (defaultedOptions.suspense || defaultedOptions.useErrorBoundary) {
+    // Prevent retrying failed query if the error boundary has not been reset yet
+    if (!errorResetBoundary.isReset()) {
+      defaultedOptions.retryOnMount = false
+    }
+  }
+
+  const [observer] = React.useState(
+    () =>
+      new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(
+        queryClient,
+        defaultedOptions,
+      ),
+  )
+
+  const result = observer.getOptimisticResult(defaultedOptions)
+
+  useSyncExternalStore(
+    React.useCallback(
+      (onStoreChange) =>
+        isRestoring
+          ? () => undefined
+          : observer.subscribe(notifyManager.batchCalls(onStoreChange)),
+      [observer, isRestoring],
+    ),
+    () => observer.getCurrentResult(),
+    () => observer.getCurrentResult(),
+  )
+
+  React.useEffect(() => {
+    errorResetBoundary.clearReset()
+  }, [errorResetBoundary])
+
+  React.useEffect(() => {
+    // Do not notify on updates because of changes in the options because
+    // these changes should already be reflected in the optimistic result.
+    observer.setOptions(defaultedOptions, { listeners: false })
+  }, [defaultedOptions, observer])
+
+  // Handle suspense
+  if (
+    defaultedOptions.suspense &&
+    result.isLoading &&
+    result.isFetching &&
+    !isRestoring
+  ) {
+    throw observer
+      .fetchOptimistic(defaultedOptions)
+      .then(({ data }) => {
+        defaultedOptions.onSuccess?.(data as TData)
+        defaultedOptions.onSettled?.(data, null)
+      })
+      .catch((error) => {
+        errorResetBoundary.clearReset()
+        defaultedOptions.onError?.(error)
+        defaultedOptions.onSettled?.(undefined, error)
+      })
+  }
+
+  // Handle error boundary
+  if (
+    result.isError &&
+    !errorResetBoundary.isReset() &&
+    !result.isFetching &&
+    shouldThrowError(defaultedOptions.useErrorBoundary, [
+      result.error,
+      observer.getCurrentQuery(),
+    ])
+  ) {
+    throw result.error
+  }
+
+  // Handle result property usage tracking
+  return !defaultedOptions.notifyOnChangeProps
+    ? observer.trackResult(result)
+    : result
+}

package/src/useInfiniteQuery.ts

@@ -0,0 +1,101 @@
+import {
+  QueryObserver,
+  InfiniteQueryObserver,
+  QueryFunction,
+  QueryKey,
+  parseQueryArgs,
+} from '@tanstack/query-core'
+import { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
+import { useBaseQuery } from './useBaseQuery'
+
+// HOOK
+
+export function useInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UseInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey
+  >,
+): UseInfiniteQueryResult<TData, TError>
+export function useInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  queryKey: TQueryKey,
+  options?: Omit<
+    UseInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey
+    >,
+    'queryKey'
+  >,
+): UseInfiniteQueryResult<TData, TError>
+export function useInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options?: Omit<
+    UseInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey
+    >,
+    'queryKey' | 'queryFn'
+  >,
+): UseInfiniteQueryResult<TData, TError>
+export function useInfiniteQuery<
+  TQueryFnData,
+  TError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  arg1:
+    | TQueryKey
+    | UseInfiniteQueryOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryFnData,
+        TQueryKey
+      >,
+  arg2?:
+    | QueryFunction<TQueryFnData, TQueryKey>
+    | UseInfiniteQueryOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryFnData,
+        TQueryKey
+      >,
+  arg3?: UseInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey
+  >,
+): UseInfiniteQueryResult<TData, TError> {
+  const options = parseQueryArgs(arg1, arg2, arg3)
+  return useBaseQuery(
+    options,
+    InfiniteQueryObserver as typeof QueryObserver,
+  ) as UseInfiniteQueryResult<TData, TError>
+}

package/src/useIsFetching.ts

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import {
+  QueryKey,
+  notifyManager,
+  parseFilterArgs,
+  QueryFilters,
+} from '@tanstack/query-core'
+
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
+import { ContextOptions } from './types'
+import { useQueryClient } from './QueryClientProvider'
+
+interface Options extends ContextOptions {}
+
+export function useIsFetching(filters?: QueryFilters, options?: Options): number
+export function useIsFetching(
+  queryKey?: QueryKey,
+  filters?: QueryFilters,
+  options?: Options,
+): number
+export function useIsFetching(
+  arg1?: QueryKey | QueryFilters,
+  arg2?: QueryFilters | Options,
+  arg3?: Options,
+): number {
+  const [filters, options = {}] = parseFilterArgs(arg1, arg2, arg3)
+  const queryClient = useQueryClient({ context: options.context })
+  const queryCache = queryClient.getQueryCache()
+
+  return useSyncExternalStore(
+    React.useCallback(
+      (onStoreChange) =>
+        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),
+      [queryCache],
+    ),
+    () => queryClient.isFetching(filters),
+    () => queryClient.isFetching(filters),
+  )
+}

package/src/useIsMutating.ts

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
+
+import {
+  notifyManager,
+  MutationKey,
+  MutationFilters,
+  parseMutationFilterArgs,
+} from '@tanstack/query-core'
+import { ContextOptions } from './types'
+import { useQueryClient } from './QueryClientProvider'
+
+interface Options extends ContextOptions {}
+
+export function useIsMutating(
+  filters?: MutationFilters,
+  options?: Options,
+): number
+export function useIsMutating(
+  mutationKey?: MutationKey,
+  filters?: Omit<MutationFilters, 'mutationKey'>,
+  options?: Options,
+): number
+export function useIsMutating(
+  arg1?: MutationKey | MutationFilters,
+  arg2?: Omit<MutationFilters, 'mutationKey'> | Options,
+  arg3?: Options,
+): number {
+  const [filters, options = {}] = parseMutationFilterArgs(arg1, arg2, arg3)
+
+  const queryClient = useQueryClient({ context: options.context })
+  const mutationCache = queryClient.getMutationCache()
+
+  return useSyncExternalStore(
+    React.useCallback(
+      (onStoreChange) =>
+        mutationCache.subscribe(notifyManager.batchCalls(onStoreChange)),
+      [mutationCache],
+    ),
+    () => queryClient.isMutating(filters),
+    () => queryClient.isMutating(filters),
+  )
+}