@tanstack/query-core 4.0.0

package/src/focusManager.ts

@@ -0,0 +1,89 @@
+import { Subscribable } from './subscribable'
+import { isServer } from './utils'
+
+type SetupFn = (
+  setFocused: (focused?: boolean) => void,
+) => (() => void) | undefined
+
+export class FocusManager extends Subscribable {
+  private focused?: boolean
+  private cleanup?: () => void
+
+  private setup: SetupFn
+
+  constructor() {
+    super()
+    this.setup = (onFocus) => {
+      // addEventListener does not exist in React Native, but window does
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!isServer && window.addEventListener) {
+        const listener = () => onFocus()
+        // Listen to visibillitychange and focus
+        window.addEventListener('visibilitychange', listener, false)
+        window.addEventListener('focus', listener, false)
+
+        return () => {
+          // Be sure to unsubscribe if a new handler is set
+          window.removeEventListener('visibilitychange', listener)
+          window.removeEventListener('focus', listener)
+        }
+      }
+    }
+  }
+
+  protected onSubscribe(): void {
+    if (!this.cleanup) {
+      this.setEventListener(this.setup)
+    }
+  }
+
+  protected onUnsubscribe() {
+    if (!this.hasListeners()) {
+      this.cleanup?.()
+      this.cleanup = undefined
+    }
+  }
+
+  setEventListener(setup: SetupFn): void {
+    this.setup = setup
+    this.cleanup?.()
+    this.cleanup = setup((focused) => {
+      if (typeof focused === 'boolean') {
+        this.setFocused(focused)
+      } else {
+        this.onFocus()
+      }
+    })
+  }
+
+  setFocused(focused?: boolean): void {
+    this.focused = focused
+
+    if (focused) {
+      this.onFocus()
+    }
+  }
+
+  onFocus(): void {
+    this.listeners.forEach((listener) => {
+      listener()
+    })
+  }
+
+  isFocused(): boolean {
+    if (typeof this.focused === 'boolean') {
+      return this.focused
+    }
+
+    // document global can be unavailable in react native
+    if (typeof document === 'undefined') {
+      return true
+    }
+
+    return [undefined, 'visible', 'prerender'].includes(
+      document.visibilityState,
+    )
+  }
+}
+
+export const focusManager = new FocusManager()

package/src/hydration.ts

@@ -0,0 +1,164 @@
+import type { QueryClient } from './queryClient'
+import type { Query, QueryState } from './query'
+import type {
+  MutationKey,
+  MutationOptions,
+  QueryKey,
+  QueryOptions,
+} from './types'
+import type { Mutation, MutationState } from './mutation'
+
+// TYPES
+
+export interface DehydrateOptions {
+  dehydrateMutations?: boolean
+  dehydrateQueries?: boolean
+  shouldDehydrateMutation?: ShouldDehydrateMutationFunction
+  shouldDehydrateQuery?: ShouldDehydrateQueryFunction
+}
+
+export interface HydrateOptions {
+  defaultOptions?: {
+    queries?: QueryOptions
+    mutations?: MutationOptions
+  }
+}
+
+interface DehydratedMutation {
+  mutationKey?: MutationKey
+  state: MutationState
+}
+
+interface DehydratedQuery {
+  queryHash: string
+  queryKey: QueryKey
+  state: QueryState
+}
+
+export interface DehydratedState {
+  mutations: DehydratedMutation[]
+  queries: DehydratedQuery[]
+}
+
+export type ShouldDehydrateQueryFunction = (query: Query) => boolean
+
+export type ShouldDehydrateMutationFunction = (mutation: Mutation) => boolean
+
+// FUNCTIONS
+
+function dehydrateMutation(mutation: Mutation): DehydratedMutation {
+  return {
+    mutationKey: mutation.options.mutationKey,
+    state: mutation.state,
+  }
+}
+
+// Most config is not dehydrated but instead meant to configure again when
+// consuming the de/rehydrated data, typically with useQuery on the client.
+// Sometimes it might make sense to prefetch data on the server and include
+// in the html-payload, but not consume it on the initial render.
+function dehydrateQuery(query: Query): DehydratedQuery {
+  return {
+    state: query.state,
+    queryKey: query.queryKey,
+    queryHash: query.queryHash,
+  }
+}
+
+function defaultShouldDehydrateMutation(mutation: Mutation) {
+  return mutation.state.isPaused
+}
+
+function defaultShouldDehydrateQuery(query: Query) {
+  return query.state.status === 'success'
+}
+
+export function dehydrate(
+  client: QueryClient,
+  options: DehydrateOptions = {},
+): DehydratedState {
+  const mutations: DehydratedMutation[] = []
+  const queries: DehydratedQuery[] = []
+
+  if (options.dehydrateMutations !== false) {
+    const shouldDehydrateMutation =
+      options.shouldDehydrateMutation || defaultShouldDehydrateMutation
+
+    client
+      .getMutationCache()
+      .getAll()
+      .forEach((mutation) => {
+        if (shouldDehydrateMutation(mutation)) {
+          mutations.push(dehydrateMutation(mutation))
+        }
+      })
+  }
+
+  if (options.dehydrateQueries !== false) {
+    const shouldDehydrateQuery =
+      options.shouldDehydrateQuery || defaultShouldDehydrateQuery
+
+    client
+      .getQueryCache()
+      .getAll()
+      .forEach((query) => {
+        if (shouldDehydrateQuery(query)) {
+          queries.push(dehydrateQuery(query))
+        }
+      })
+  }
+
+  return { mutations, queries }
+}
+
+export function hydrate(
+  client: QueryClient,
+  dehydratedState: unknown,
+  options?: HydrateOptions,
+): void {
+  if (typeof dehydratedState !== 'object' || dehydratedState === null) {
+    return
+  }
+
+  const mutationCache = client.getMutationCache()
+  const queryCache = client.getQueryCache()
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const mutations = (dehydratedState as DehydratedState).mutations || []
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const queries = (dehydratedState as DehydratedState).queries || []
+
+  mutations.forEach((dehydratedMutation) => {
+    mutationCache.build(
+      client,
+      {
+        ...options?.defaultOptions?.mutations,
+        mutationKey: dehydratedMutation.mutationKey,
+      },
+      dehydratedMutation.state,
+    )
+  })
+
+  queries.forEach((dehydratedQuery) => {
+    const query = queryCache.get(dehydratedQuery.queryHash)
+
+    // Do not hydrate if an existing query exists with newer data
+    if (query) {
+      if (query.state.dataUpdatedAt < dehydratedQuery.state.dataUpdatedAt) {
+        query.setState(dehydratedQuery.state)
+      }
+      return
+    }
+
+    // Restore query
+    queryCache.build(
+      client,
+      {
+        ...options?.defaultOptions?.queries,
+        queryKey: dehydratedQuery.queryKey,
+        queryHash: dehydratedQuery.queryHash,
+      },
+      dehydratedQuery.state,
+    )
+  })
+}

package/src/index.ts

@@ -0,0 +1,35 @@
+export { CancelledError } from './retryer'
+export { QueryCache } from './queryCache'
+export { QueryClient } from './queryClient'
+export { QueryObserver } from './queryObserver'
+export { QueriesObserver } from './queriesObserver'
+export { InfiniteQueryObserver } from './infiniteQueryObserver'
+export { MutationCache } from './mutationCache'
+export { MutationObserver } from './mutationObserver'
+export { notifyManager } from './notifyManager'
+export { focusManager } from './focusManager'
+export { onlineManager } from './onlineManager'
+export {
+  hashQueryKey,
+  isError,
+  parseQueryArgs,
+  parseFilterArgs,
+  parseMutationFilterArgs,
+  parseMutationArgs,
+} from './utils'
+export type { MutationFilters, QueryFilters } from './utils'
+export { isCancelledError } from './retryer'
+export { dehydrate, hydrate } from './hydration'
+
+// Types
+export * from './types'
+export type { Query } from './query'
+export type { Mutation } from './mutation'
+export type { Logger } from './logger'
+export type {
+  DehydrateOptions,
+  DehydratedState,
+  HydrateOptions,
+  ShouldDehydrateMutationFunction,
+  ShouldDehydrateQueryFunction,
+} from './hydration'

package/src/infiniteQueryBehavior.ts

@@ -0,0 +1,214 @@
+import type { QueryBehavior } from './query'
+
+import type {
+  InfiniteData,
+  QueryFunctionContext,
+  QueryOptions,
+  RefetchQueryFilters,
+} from './types'
+
+export function infiniteQueryBehavior<
+  TQueryFnData,
+  TError,
+  TData,
+>(): QueryBehavior<TQueryFnData, TError, InfiniteData<TData>> {
+  return {
+    onFetch: (context) => {
+      context.fetchFn = () => {
+        const refetchPage: RefetchQueryFilters['refetchPage'] | undefined =
+          context.fetchOptions?.meta?.refetchPage
+        const fetchMore = context.fetchOptions?.meta?.fetchMore
+        const pageParam = fetchMore?.pageParam
+        const isFetchingNextPage = fetchMore?.direction === 'forward'
+        const isFetchingPreviousPage = fetchMore?.direction === 'backward'
+        const oldPages = context.state.data?.pages || []
+        const oldPageParams = context.state.data?.pageParams || []
+        let newPageParams = oldPageParams
+        let cancelled = false
+
+        const addSignalProperty = (object: unknown) => {
+          Object.defineProperty(object, 'signal', {
+            enumerable: true,
+            get: () => {
+              if (context.signal?.aborted) {
+                cancelled = true
+              } else {
+                context.signal?.addEventListener('abort', () => {
+                  cancelled = true
+                })
+              }
+              return context.signal
+            },
+          })
+        }
+
+        // Get query function
+        const queryFn =
+          context.options.queryFn || (() => Promise.reject('Missing queryFn'))
+
+        const buildNewPages = (
+          pages: unknown[],
+          param: unknown,
+          page: unknown,
+          previous?: boolean,
+        ) => {
+          newPageParams = previous
+            ? [param, ...newPageParams]
+            : [...newPageParams, param]
+          return previous ? [page, ...pages] : [...pages, page]
+        }
+
+        // Create function to fetch a page
+        const fetchPage = (
+          pages: unknown[],
+          manual?: boolean,
+          param?: unknown,
+          previous?: boolean,
+        ): Promise<unknown[]> => {
+          if (cancelled) {
+            return Promise.reject('Cancelled')
+          }
+
+          if (typeof param === 'undefined' && !manual && pages.length) {
+            return Promise.resolve(pages)
+          }
+
+          const queryFnContext: QueryFunctionContext = {
+            queryKey: context.queryKey,
+            pageParam: param,
+            meta: context.meta,
+          }
+
+          addSignalProperty(queryFnContext)
+
+          const queryFnResult = queryFn(queryFnContext)
+
+          const promise = Promise.resolve(queryFnResult).then((page) =>
+            buildNewPages(pages, param, page, previous),
+          )
+
+          return promise
+        }
+
+        let promise: Promise<unknown[]>
+
+        // Fetch first page?
+        if (!oldPages.length) {
+          promise = fetchPage([])
+        }
+
+        // Fetch next page?
+        else if (isFetchingNextPage) {
+          const manual = typeof pageParam !== 'undefined'
+          const param = manual
+            ? pageParam
+            : getNextPageParam(context.options, oldPages)
+          promise = fetchPage(oldPages, manual, param)
+        }
+
+        // Fetch previous page?
+        else if (isFetchingPreviousPage) {
+          const manual = typeof pageParam !== 'undefined'
+          const param = manual
+            ? pageParam
+            : getPreviousPageParam(context.options, oldPages)
+          promise = fetchPage(oldPages, manual, param, true)
+        }
+
+        // Refetch pages
+        else {
+          newPageParams = []
+
+          const manual = typeof context.options.getNextPageParam === 'undefined'
+
+          const shouldFetchFirstPage =
+            refetchPage && oldPages[0]
+              ? refetchPage(oldPages[0], 0, oldPages)
+              : true
+
+          // Fetch first page
+          promise = shouldFetchFirstPage
+            ? fetchPage([], manual, oldPageParams[0])
+            : Promise.resolve(buildNewPages([], oldPageParams[0], oldPages[0]))
+
+          // Fetch remaining pages
+          for (let i = 1; i < oldPages.length; i++) {
+            promise = promise.then((pages) => {
+              const shouldFetchNextPage =
+                refetchPage && oldPages[i]
+                  ? refetchPage(oldPages[i], i, oldPages)
+                  : true
+
+              if (shouldFetchNextPage) {
+                const param = manual
+                  ? oldPageParams[i]
+                  : getNextPageParam(context.options, pages)
+                return fetchPage(pages, manual, param)
+              }
+              return Promise.resolve(
+                buildNewPages(pages, oldPageParams[i], oldPages[i]),
+              )
+            })
+          }
+        }
+
+        const finalPromise = promise.then((pages) => ({
+          pages,
+          pageParams: newPageParams,
+        }))
+
+        return finalPromise
+      }
+    },
+  }
+}
+
+export function getNextPageParam(
+  options: QueryOptions<any, any>,
+  pages: unknown[],
+): unknown | undefined {
+  return options.getNextPageParam?.(pages[pages.length - 1], pages)
+}
+
+export function getPreviousPageParam(
+  options: QueryOptions<any, any>,
+  pages: unknown[],
+): unknown | undefined {
+  return options.getPreviousPageParam?.(pages[0], pages)
+}
+
+/**
+ * Checks if there is a next page.
+ * Returns `undefined` if it cannot be determined.
+ */
+export function hasNextPage(
+  options: QueryOptions<any, any, any, any>,
+  pages?: unknown,
+): boolean | undefined {
+  if (options.getNextPageParam && Array.isArray(pages)) {
+    const nextPageParam = getNextPageParam(options, pages)
+    return (
+      typeof nextPageParam !== 'undefined' &&
+      nextPageParam !== null &&
+      nextPageParam !== false
+    )
+  }
+}
+
+/**
+ * Checks if there is a previous page.
+ * Returns `undefined` if it cannot be determined.
+ */
+export function hasPreviousPage(
+  options: QueryOptions<any, any, any, any>,
+  pages?: unknown,
+): boolean | undefined {
+  if (options.getPreviousPageParam && Array.isArray(pages)) {
+    const previousPageParam = getPreviousPageParam(options, pages)
+    return (
+      typeof previousPageParam !== 'undefined' &&
+      previousPageParam !== null &&
+      previousPageParam !== false
+    )
+  }
+}

package/src/infiniteQueryObserver.ts

@@ -0,0 +1,159 @@
+import type {
+  DefaultedInfiniteQueryObserverOptions,
+  FetchNextPageOptions,
+  FetchPreviousPageOptions,
+  InfiniteData,
+  InfiniteQueryObserverOptions,
+  InfiniteQueryObserverResult,
+  QueryKey,
+} from './types'
+import type { QueryClient } from './queryClient'
+import {
+  NotifyOptions,
+  ObserverFetchOptions,
+  QueryObserver,
+} from './queryObserver'
+import {
+  hasNextPage,
+  hasPreviousPage,
+  infiniteQueryBehavior,
+} from './infiniteQueryBehavior'
+import { Query } from './query'
+
+type InfiniteQueryObserverListener<TData, TError> = (
+  result: InfiniteQueryObserverResult<TData, TError>,
+) => void
+
+export class InfiniteQueryObserver<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> extends QueryObserver<
+  TQueryFnData,
+  TError,
+  InfiniteData<TData>,
+  InfiniteData<TQueryData>,
+  TQueryKey
+> {
+  // Type override
+  subscribe!: (
+    listener?: InfiniteQueryObserverListener<TData, TError>,
+  ) => () => void
+
+  // Type override
+  getCurrentResult!: () => InfiniteQueryObserverResult<TData, TError>
+
+  // Type override
+  protected fetch!: (
+    fetchOptions: ObserverFetchOptions,
+  ) => Promise<InfiniteQueryObserverResult<TData, TError>>
+
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  constructor(
+    client: QueryClient,
+    options: InfiniteQueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey
+    >,
+  ) {
+    super(client, options)
+  }
+
+  protected bindMethods(): void {
+    super.bindMethods()
+    this.fetchNextPage = this.fetchNextPage.bind(this)
+    this.fetchPreviousPage = this.fetchPreviousPage.bind(this)
+  }
+
+  setOptions(
+    options?: InfiniteQueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey
+    >,
+    notifyOptions?: NotifyOptions,
+  ): void {
+    super.setOptions(
+      {
+        ...options,
+        behavior: infiniteQueryBehavior(),
+      },
+      notifyOptions,
+    )
+  }
+
+  getOptimisticResult(
+    options: DefaultedInfiniteQueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey
+    >,
+  ): InfiniteQueryObserverResult<TData, TError> {
+    options.behavior = infiniteQueryBehavior()
+    return super.getOptimisticResult(options) as InfiniteQueryObserverResult<
+      TData,
+      TError
+    >
+  }
+
+  fetchNextPage({ pageParam, ...options }: FetchNextPageOptions = {}): Promise<
+    InfiniteQueryObserverResult<TData, TError>
+  > {
+    return this.fetch({
+      ...options,
+      meta: {
+        fetchMore: { direction: 'forward', pageParam },
+      },
+    })
+  }
+
+  fetchPreviousPage({
+    pageParam,
+    ...options
+  }: FetchPreviousPageOptions = {}): Promise<
+    InfiniteQueryObserverResult<TData, TError>
+  > {
+    return this.fetch({
+      ...options,
+      meta: {
+        fetchMore: { direction: 'backward', pageParam },
+      },
+    })
+  }
+
+  protected createResult(
+    query: Query<TQueryFnData, TError, InfiniteData<TQueryData>, TQueryKey>,
+    options: InfiniteQueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey
+    >,
+  ): InfiniteQueryObserverResult<TData, TError> {
+    const { state } = query
+    const result = super.createResult(query, options)
+    return {
+      ...result,
+      fetchNextPage: this.fetchNextPage,
+      fetchPreviousPage: this.fetchPreviousPage,
+      hasNextPage: hasNextPage(options, state.data?.pages),
+      hasPreviousPage: hasPreviousPage(options, state.data?.pages),
+      isFetchingNextPage:
+        state.fetchStatus === 'fetching' &&
+        state.fetchMeta?.fetchMore?.direction === 'forward',
+      isFetchingPreviousPage:
+        state.fetchStatus === 'fetching' &&
+        state.fetchMeta?.fetchMore?.direction === 'backward',
+    }
+  }
+}

package/src/logger.native.ts

@@ -0,0 +1,11 @@
+import type { Logger } from './logger'
+
+/**
+ * See https://github.com/tannerlinsley/react-query/issues/795
+ * and https://github.com/tannerlinsley/react-query/pull/3246/#discussion_r795105707
+ */
+export const defaultLogger: Logger = {
+  log: console.log,
+  warn: console.warn,
+  error: console.warn,
+}

package/src/logger.ts

@@ -0,0 +1,9 @@
+export interface Logger {
+  log: LogFunction
+  warn: LogFunction
+  error: LogFunction
+}
+
+type LogFunction = (...args: any[]) => void
+
+export const defaultLogger: Logger = console