@tanstack/query-core 5.0.0-beta.6 → 5.0.0-rc.0

package/src/infiniteQueryBehavior.ts

@@ -7,12 +7,12 @@ import type {
   QueryKey,
 } from './types'
 
-export function infiniteQueryBehavior<TQueryFnData, TError, TData>(
+export function infiniteQueryBehavior<TQueryFnData, TError, TData, TPageParam>(
   pages?: number,
-): QueryBehavior<TQueryFnData, TError, InfiniteData<TData>> {
+): QueryBehavior<TQueryFnData, TError, InfiniteData<TData, TPageParam>> {
   return {
-    onFetch: (context) => {
-      context.fetchFn = async () => {
+    onFetch: (context, query) => {
+      const fetchFn = async () => {
         const options = context.options as InfiniteQueryPageParamsOptions<TData>
         const direction = context.fetchOptions?.meta?.fetchMore?.direction
         const oldPages = context.state.data?.pages || []
@@ -54,7 +54,7 @@ export function infiniteQueryBehavior<TQueryFnData, TError, TData>(
             return Promise.reject()
           }
 
-          if (typeof param === 'undefined' && data.pages.length) {
+          if (param == null && data.pages.length) {
             return Promise.resolve(data)
           }
 
@@ -100,7 +100,7 @@ export function infiniteQueryBehavior<TQueryFnData, TError, TData>(
           // Fetch first page
           result = await fetchPage(
             empty,
-            oldPageParams[0] ?? options.defaultPageParam,
+            oldPageParams[0] ?? options.initialPageParam,
           )
 
           const remainingPages = pages ?? oldPages.length
@@ -114,6 +114,21 @@ export function infiniteQueryBehavior<TQueryFnData, TError, TData>(
 
         return result
       }
+      if (context.options.persister) {
+        context.fetchFn = () => {
+          return context.options.persister?.(
+            fetchFn as any,
+            {
+              queryKey: context.queryKey,
+              meta: context.options.meta,
+              signal: context.signal,
+            },
+            query,
+          )
+        }
+      } else {
+        context.fetchFn = fetchFn
+      }
     },
   }
 }
@@ -151,7 +166,7 @@ export function hasNextPage(
   data?: InfiniteData<unknown>,
 ): boolean {
   if (!data) return false
-  return typeof getNextPageParam(options, data) !== 'undefined'
+  return getNextPageParam(options, data) != null
 }
 
 /**
@@ -162,5 +177,5 @@ export function hasPreviousPage(
   data?: InfiniteData<unknown>,
 ): boolean {
   if (!data || !options.getPreviousPageParam) return false
-  return typeof getPreviousPageParam(options, data) !== 'undefined'
+  return getPreviousPageParam(options, data) != null
 }

package/src/infiniteQueryObserver.ts

@@ -33,7 +33,7 @@ export class InfiniteQueryObserver<
   TQueryFnData,
   TError,
   TData,
-  InfiniteData<TQueryData>,
+  InfiniteData<TQueryData, TPageParam>,
   TQueryKey
 > {
   // Type override
@@ -130,7 +130,12 @@ export class InfiniteQueryObserver<
   }
 
   protected createResult(
-    query: Query<TQueryFnData, TError, InfiniteData<TQueryData>, TQueryKey>,
+    query: Query<
+      TQueryFnData,
+      TError,
+      InfiniteData<TQueryData, TPageParam>,
+      TQueryKey
+    >,
     options: InfiniteQueryObserverOptions<
       TQueryFnData,
       TError,

package/src/mutation.ts

@@ -88,7 +88,7 @@ export class Mutation<
   options!: MutationOptions<TData, TError, TVariables, TContext>
   readonly mutationId: number
 
-  #observers: MutationObserver<TData, TError, TVariables, TContext>[]
+  #observers: Array<MutationObserver<TData, TError, TVariables, TContext>>
   #defaultOptions?: MutationOptions<TData, TError, TVariables, TContext>
   #mutationCache: MutationCache
   #retryer?: Retryer<TData>

package/src/mutationCache.ts

@@ -82,7 +82,7 @@ type MutationCacheListener = (event: MutationCacheNotifyEvent) => void
 // CLASS
 
 export class MutationCache extends Subscribable<MutationCacheListener> {
-  #mutations: Mutation<any, any, any, any>[]
+  #mutations: Array<Mutation<any, any, any, any>>
   #mutationId: number
   #resuming: Promise<unknown> | undefined
 
@@ -127,7 +127,7 @@ export class MutationCache extends Subscribable<MutationCacheListener> {
     })
   }
 
-  getAll(): Mutation[] {
+  getAll(): Array<Mutation> {
     return this.#mutations
   }
 
@@ -146,7 +146,7 @@ export class MutationCache extends Subscribable<MutationCacheListener> {
     )
   }
 
-  findAll(filters: MutationFilters = {}): Mutation[] {
+  findAll(filters: MutationFilters = {}): Array<Mutation> {
     return this.#mutations.filter((mutation) =>
       matchMutation(filters, mutation),
     )

package/src/notifyManager.ts

@@ -8,10 +8,10 @@ type NotifyFunction = (callback: () => void) => void
 
 type BatchNotifyFunction = (callback: () => void) => void
 
-type BatchCallsCallback<T extends unknown[]> = (...args: T) => void
+type BatchCallsCallback<T extends Array<unknown>> = (...args: T) => void
 
 export function createNotifyManager() {
-  let queue: NotifyCallback[] = []
+  let queue: Array<NotifyCallback> = []
   let transactions = 0
   let notifyFn: NotifyFunction = (callback) => {
     callback()
@@ -47,7 +47,7 @@ export function createNotifyManager() {
   /**
    * All calls to the wrapped function will be batched.
    */
-  const batchCalls = <T extends unknown[]>(
+  const batchCalls = <T extends Array<unknown>>(
     callback: BatchCallsCallback<T>,
   ): BatchCallsCallback<T> => {
     return (...args) => {

package/src/queriesObserver.ts

@@ -10,37 +10,37 @@ import type {
 import type { QueryClient } from './queryClient'
 import type { NotifyOptions } from './queryObserver'
 
-function difference<T>(array1: T[], array2: T[]): T[] {
+function difference<T>(array1: Array<T>, array2: Array<T>): Array<T> {
   return array1.filter((x) => !array2.includes(x))
 }
 
-function replaceAt<T>(array: T[], index: number, value: T): T[] {
+function replaceAt<T>(array: Array<T>, index: number, value: T): Array<T> {
   const copy = array.slice(0)
   copy[index] = value
   return copy
 }
 
-type QueriesObserverListener = (result: QueryObserverResult[]) => void
+type QueriesObserverListener = (result: Array<QueryObserverResult>) => void
 
 export interface QueriesObserverOptions<
-  TCombinedResult = QueryObserverResult[],
+  TCombinedResult = Array<QueryObserverResult>,
 > {
-  combine?: (result: QueryObserverResult[]) => TCombinedResult
+  combine?: (result: Array<QueryObserverResult>) => TCombinedResult
 }
 
 export class QueriesObserver<
-  TCombinedResult = QueryObserverResult[],
+  TCombinedResult = Array<QueryObserverResult>,
 > extends Subscribable<QueriesObserverListener> {
   #client: QueryClient
-  #result!: QueryObserverResult[]
-  #queries: QueryObserverOptions[]
-  #observers: QueryObserver[]
+  #result!: Array<QueryObserverResult>
+  #queries: Array<QueryObserverOptions>
+  #observers: Array<QueryObserver>
   #options?: QueriesObserverOptions<TCombinedResult>
   #combinedResult!: TCombinedResult
 
   constructor(
     client: QueryClient,
-    queries: QueryObserverOptions[],
+    queries: Array<QueryObserverOptions>,
     options?: QueriesObserverOptions<TCombinedResult>,
   ) {
     super()
@@ -53,7 +53,7 @@ export class QueriesObserver<
     this.setQueries(queries, options)
   }
 
-  #setResult(value: QueryObserverResult[]) {
+  #setResult(value: Array<QueryObserverResult>) {
     this.#result = value
     this.#combinedResult = this.#combineResult(value)
   }
@@ -82,7 +82,7 @@ export class QueriesObserver<
   }
 
   setQueries(
-    queries: QueryObserverOptions[],
+    queries: Array<QueryObserverOptions>,
     options?: QueriesObserverOptions<TCombinedResult>,
     notifyOptions?: NotifyOptions,
   ): void {
@@ -145,11 +145,11 @@ export class QueriesObserver<
   }
 
   getOptimisticResult(
-    queries: QueryObserverOptions[],
+    queries: Array<QueryObserverOptions>,
   ): [
-    rawResult: QueryObserverResult[],
-    combineResult: (r?: QueryObserverResult[]) => TCombinedResult,
-    trackResult: () => QueryObserverResult[],
+    rawResult: Array<QueryObserverResult>,
+    combineResult: (r?: Array<QueryObserverResult>) => TCombinedResult,
+    trackResult: () => Array<QueryObserverResult>,
   ] {
     const matches = this.#findMatchingObservers(queries)
     const result = matches.map((match) =>
@@ -158,7 +158,7 @@ export class QueriesObserver<
 
     return [
       result,
-      (r?: QueryObserverResult[]) => {
+      (r?: Array<QueryObserverResult>) => {
         return this.#combineResult(r ?? result)
       },
       () => {
@@ -172,7 +172,7 @@ export class QueriesObserver<
     ]
   }
 
-  #combineResult(input: QueryObserverResult[]): TCombinedResult {
+  #combineResult(input: Array<QueryObserverResult>): TCombinedResult {
     const combine = this.#options?.combine
     if (combine) {
       return replaceEqualDeep(this.#combinedResult, combine(input))
@@ -181,8 +181,8 @@ export class QueriesObserver<
   }
 
   #findMatchingObservers(
-    queries: QueryObserverOptions[],
-  ): QueryObserverMatch[] {
+    queries: Array<QueryObserverOptions>,
+  ): Array<QueryObserverMatch> {
     const prevObservers = this.#observers
     const prevObserversMap = new Map(
       prevObservers.map((observer) => [observer.options.queryHash, observer]),
@@ -192,7 +192,7 @@ export class QueriesObserver<
       this.#client.defaultQueryOptions(options),
     )
 
-    const matchingObservers: QueryObserverMatch[] =
+    const matchingObservers: Array<QueryObserverMatch> =
       defaultedQueryOptions.flatMap((defaultedOptions) => {
         const match = prevObserversMap.get(defaultedOptions.queryHash)
         if (match != null) {
@@ -218,14 +218,13 @@ export class QueriesObserver<
       )
     }
 
-    const newOrReusedObservers: QueryObserverMatch[] = unmatchedQueries.map(
-      (options) => {
+    const newOrReusedObservers: Array<QueryObserverMatch> =
+      unmatchedQueries.map((options) => {
         return {
           defaultedQueryOptions: options,
           observer: getObserver(options),
         }
-      },
-    )
+      })
 
     const sortMatchesByOrderOfQueries = (
       a: QueryObserverMatch,

package/src/query.ts

@@ -71,6 +71,7 @@ export interface QueryBehavior<
 > {
   onFetch: (
     context: FetchContext<TQueryFnData, TError, TData, TQueryKey>,
+    query: Query,
   ) => void
 }
 
@@ -159,7 +160,7 @@ export class Query<
   #cache: QueryCache
   #promise?: Promise<TData>
   #retryer?: Retryer<TData>
-  #observers: QueryObserver<any, any, any, any, any>[]
+  #observers: Array<QueryObserver<any, any, any, any, any>>
   #defaultOptions?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
   #abortSignalConsumed: boolean
 
@@ -392,6 +393,14 @@ export class Query<
         )
       }
       this.#abortSignalConsumed = false
+      if (this.options.persister) {
+        return this.options.persister(
+          this.options.queryFn,
+          queryFnContext as QueryFunctionContext<TQueryKey>,
+          this as unknown as Query,
+        )
+      }
+
       return this.options.queryFn(
         queryFnContext as QueryFunctionContext<TQueryKey>,
       )
@@ -413,6 +422,7 @@ export class Query<
 
     this.options.behavior?.onFetch(
       context as FetchContext<TQueryFnData, TError, TData, TQueryKey>,
+      this as unknown as Query,
     )
 
     // Store state in case the current fetch needs to be reverted
@@ -560,7 +570,7 @@ export class Query<
           const error = action.error as unknown
 
           if (isCancelledError(error) && error.revert && this.#revertState) {
-            return { ...this.#revertState }
+            return { ...this.#revertState, fetchStatus: 'idle' }
           }
 
           return {

package/src/queryCache.ts

@@ -168,7 +168,7 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
       | undefined
   }
 
-  getAll(): Query[] {
+  getAll(): Array<Query> {
     return [...this.#queries.values()]
   }
 
@@ -182,7 +182,7 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
     ) as Query<TQueryFnData, TError, TData> | undefined
   }
 
-  findAll(filters: QueryFilters = {}): Query[] {
+  findAll(filters: QueryFilters = {}): Array<Query> {
     const queries = this.getAll()
     return Object.keys(filters).length > 0
       ? queries.filter((query) => matchQuery(filters, query))

package/src/queryClient.ts

@@ -115,7 +115,7 @@ export class QueryClient {
 
   ensureQueryData<
     TQueryFnData,
-    TError,
+    TError = DefaultError,
     TData = TQueryFnData,
     TQueryKey extends QueryKey = QueryKey,
   >(
@@ -128,7 +128,7 @@ export class QueryClient {
 
   getQueriesData<TQueryFnData = unknown>(
     filters: QueryFilters,
-  ): [QueryKey, TQueryFnData | undefined][] {
+  ): Array<[QueryKey, TQueryFnData | undefined]> {
     return this.getQueryCache()
       .findAll(filters)
       .map(({ queryKey, state }) => {
@@ -167,7 +167,7 @@ export class QueryClient {
     filters: QueryFilters,
     updater: Updater<TQueryFnData | undefined, TQueryFnData | undefined>,
     options?: SetDataOptions,
-  ): [QueryKey, TQueryFnData | undefined][] {
+  ): Array<[QueryKey, TQueryFnData | undefined]> {
     return notifyManager.batch(() =>
       this.getQueryCache()
         .findAll(filters)
@@ -324,10 +324,13 @@ export class QueryClient {
       TQueryKey,
       TPageParam
     >,
-  ): Promise<InfiniteData<TData>> {
-    options.behavior = infiniteQueryBehavior<TQueryFnData, TError, TData>(
-      options.pages,
-    )
+  ): Promise<InfiniteData<TData, TPageParam>> {
+    options.behavior = infiniteQueryBehavior<
+      TQueryFnData,
+      TError,
+      TData,
+      TPageParam
+    >(options.pages)
     return this.fetchQuery(options)
   }
 
@@ -486,6 +489,13 @@ export class QueryClient {
       defaultedOptions.throwOnError = !!defaultedOptions.suspense
     }
 
+    if (
+      typeof defaultedOptions.networkMode === 'undefined' &&
+      defaultedOptions.persister
+    ) {
+      defaultedOptions.networkMode = 'offlineFirst'
+    }
+
     return defaultedOptions as DefaultedQueryObserverOptions<
       TQueryFnData,
       TError,

package/src/queryObserver.ts

@@ -763,7 +763,7 @@ function shouldAssignObserverCurrentProperties<
 ) {
   // if the newly created result isn't what the observer is holding as current,
   // then we'll need to update the properties as well
-  if (observer.getCurrentResult() !== optimisticResult) {
+  if (!shallowEqualObjects(observer.getCurrentResult(), optimisticResult)) {
     return true
   }
 

package/src/tests/hydration.test.tsx

@@ -69,7 +69,7 @@ describe('dehydration and rehydration', () => {
       key: [{ nestedKey: 1 }],
     })
 
-    const fetchDataAfterHydration = vi.fn<unknown[], unknown>()
+    const fetchDataAfterHydration = vi.fn<Array<unknown>, unknown>()
     await hydrationClient.prefetchQuery({
       queryKey: ['string'],
       queryFn: fetchDataAfterHydration,
@@ -196,7 +196,7 @@ describe('dehydration and rehydration', () => {
       })?.state.data,
     ).toBe('string')
 
-    const fetchDataAfterHydration = vi.fn<unknown[], unknown>()
+    const fetchDataAfterHydration = vi.fn<Array<unknown>, unknown>()
     await hydrationClient.prefetchQuery({
       queryKey: ['string', { key: ['string'], key2: 0 }],
       queryFn: fetchDataAfterHydration,

package/src/tests/infiniteQueryBehavior.test.tsx

@@ -24,7 +24,7 @@ describe('InfiniteQueryBehavior', () => {
     const observer = new InfiniteQueryObserver(queryClient, {
       queryKey: key,
       retry: false,
-      defaultPageParam: 1,
+      initialPageParam: 1,
       getNextPageParam: () => 2,
     })
 
@@ -62,7 +62,7 @@ describe('InfiniteQueryBehavior', () => {
       getNextPageParam: (lastPage) => lastPage + 1,
       getPreviousPageParam: (firstPage) => firstPage - 1,
       maxPages: 2,
-      defaultPageParam: 1,
+      initialPageParam: 1,
     })
 
     let observerResult:
@@ -204,7 +204,7 @@ describe('InfiniteQueryBehavior', () => {
       queryFn: queryFnSpy,
       getNextPageParam: (lastPage) => lastPage + 1,
       getPreviousPageParam: (firstPage) => firstPage - 1,
-      defaultPageParam: 1,
+      initialPageParam: 1,
     })
 
     let observerResult:
@@ -255,7 +255,7 @@ describe('InfiniteQueryBehavior', () => {
       queryFn: queryFnSpy,
       getNextPageParam: (lastPage) => lastPage + 1,
       getPreviousPageParam: (firstPage) => firstPage - 1,
-      defaultPageParam: 1,
+      initialPageParam: 1,
     })
 
     let observerResult:

package/src/tests/infiniteQueryObserver.test.tsx

@@ -1,4 +1,4 @@
-import { vi } from 'vitest'
+import { expect, vi } from 'vitest'
 import { InfiniteQueryObserver } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
 import type { QueryClient } from '..'
@@ -24,7 +24,7 @@ describe('InfiniteQueryObserver', () => {
         pages: data.pages.map((x) => `${x}`),
         pageParams: data.pageParams,
       }),
-      defaultPageParam: 1,
+      initialPageParam: 1,
       getNextPageParam: () => 2,
     })
     let observerResult
@@ -53,7 +53,7 @@ describe('InfiniteQueryObserver', () => {
         pages: data.pages.map((x) => `${x}`),
         pageParams: data.pageParams,
       }),
-      defaultPageParam: 1,
+      initialPageParam: 1,
       getNextPageParam: () => 2,
     })
     let observerResult
@@ -70,12 +70,12 @@ describe('InfiniteQueryObserver', () => {
 
   test('getNextPagParam and getPreviousPageParam should receive current pageParams', async () => {
     const key = queryKey()
-    let single: string[] = []
-    let all: string[] = []
+    let single: Array<string> = []
+    let all: Array<string> = []
     const observer = new InfiniteQueryObserver(queryClient, {
       queryKey: key,
       queryFn: ({ pageParam }) => String(pageParam),
-      defaultPageParam: 1,
+      initialPageParam: 1,
       getNextPageParam: (_, __, lastPageParam, allPageParams) => {
         single.push('next' + lastPageParam)
         all.push('next' + allPageParams.join(','))
@@ -110,7 +110,7 @@ describe('InfiniteQueryObserver', () => {
     const observer = new InfiniteQueryObserver(queryClient, {
       queryKey: key,
       queryFn,
-      defaultPageParam: 1,
+      initialPageParam: 1,
       getNextPageParam: () => next,
     })
 
@@ -119,6 +119,7 @@ describe('InfiniteQueryObserver', () => {
 
     expect(observer.getCurrentResult().data?.pages).toEqual(['1', '2'])
     expect(queryFn).toBeCalledTimes(2)
+    expect(observer.getCurrentResult().hasNextPage).toBe(true)
 
     next = undefined
 
@@ -126,5 +127,33 @@ describe('InfiniteQueryObserver', () => {
 
     expect(observer.getCurrentResult().data?.pages).toEqual(['1'])
     expect(queryFn).toBeCalledTimes(3)
+    expect(observer.getCurrentResult().hasNextPage).toBe(false)
+  })
+
+  test('should stop refetching if null is returned from getNextPageParam', async () => {
+    const key = queryKey()
+    let next: number | null = 2
+    const queryFn = vi.fn<any, any>(({ pageParam }) => String(pageParam))
+    const observer = new InfiniteQueryObserver(queryClient, {
+      queryKey: key,
+      queryFn,
+      initialPageParam: 1,
+      getNextPageParam: () => next,
+    })
+
+    await observer.fetchNextPage()
+    await observer.fetchNextPage()
+
+    expect(observer.getCurrentResult().data?.pages).toEqual(['1', '2'])
+    expect(queryFn).toBeCalledTimes(2)
+    expect(observer.getCurrentResult().hasNextPage).toBe(true)
+
+    next = null
+
+    await observer.refetch()
+
+    expect(observer.getCurrentResult().data?.pages).toEqual(['1'])
+    expect(queryFn).toBeCalledTimes(3)
+    expect(observer.getCurrentResult().hasNextPage).toBe(false)
   })
 })

package/src/tests/mutations.test.tsx

@@ -79,7 +79,7 @@ describe('mutations', () => {
       submittedAt: 0,
     })
 
-    const states: MutationState<string, unknown, string, string>[] = []
+    const states: Array<MutationState<string, unknown, string, string>> = []
 
     mutation.subscribe((state) => {
       states.push(state)
@@ -159,7 +159,7 @@ describe('mutations', () => {
       retryDelay: 1,
     })
 
-    const states: MutationState<string, unknown, string, string>[] = []
+    const states: Array<MutationState<string, unknown, string, string>> = []
 
     mutation.subscribe((state) => {
       states.push(state)

package/src/tests/queriesObserver.test.tsx

@@ -68,7 +68,7 @@ describe('queriesObserver', () => {
       { queryKey: key1, queryFn: queryFn1 },
       { queryKey: key2, queryFn: queryFn2 },
     ])
-    const results: QueryObserverResult[][] = []
+    const results: Array<Array<QueryObserverResult>> = []
     results.push(observer.getCurrentResult())
     const unsubscribe = observer.subscribe((result) => {
       results.push(result)
@@ -113,7 +113,7 @@ describe('queriesObserver', () => {
       { queryKey: key1, queryFn: queryFn1 },
       { queryKey: key2, queryFn: queryFn2 },
     ])
-    const results: QueryObserverResult[][] = []
+    const results: Array<Array<QueryObserverResult>> = []
     results.push(observer.getCurrentResult())
     const unsubscribe = observer.subscribe((result) => {
       results.push(result)
@@ -160,7 +160,7 @@ describe('queriesObserver', () => {
       { queryKey: key1, queryFn: queryFn1 },
       { queryKey: key2, queryFn: queryFn2 },
     ])
-    const results: QueryObserverResult[][] = []
+    const results: Array<Array<QueryObserverResult>> = []
     results.push(observer.getCurrentResult())
     const unsubscribe = observer.subscribe((result) => {
       results.push(result)
@@ -208,7 +208,7 @@ describe('queriesObserver', () => {
       { queryKey: key1, queryFn: queryFn1 },
       { queryKey: key2, queryFn: queryFn2 },
     ])
-    const results: QueryObserverResult[][] = []
+    const results: Array<Array<QueryObserverResult>> = []
     results.push(observer.getCurrentResult())
     const unsubscribe = observer.subscribe((result) => {
       results.push(result)