feat(infiniteQuery): add possibility to decide which pages should be refetched

move refetchPage into queryFilters

Author: TkDodo

docs/src/pages/guides/infinite-queries.md

@@ -108,7 +108,7 @@ const { refetch } = useInfiniteQuery('projects', fetchProjects, {
 refetch({ refetchPage: (page, index) => index === 0 })
 ```
 
-You can also pass this function as part of the 3rd argument (`options`) to [queryClient.refetchQueries](/reference/QueryClient#queryclientrefetchqueries), [queryClient.invalidateQueries](/reference/QueryClient#queryclientinvalidatequeries) or [queryClient.resetQueries](/reference/QueryClient#queryclientresetqueries).
+You can also pass this function as part of the 2nd argument (`queryFilters`) to [queryClient.refetchQueries](/reference/QueryClient#queryclientrefetchqueries), [queryClient.invalidateQueries](/reference/QueryClient#queryclientinvalidatequeries) or [queryClient.resetQueries](/reference/QueryClient#queryclientresetqueries).
 
 **Signature**
 

docs/src/pages/reference/QueryClient.md

@@ -287,12 +287,12 @@ await queryClient.invalidateQueries('posts', {
   - `refetchInactive: Boolean`
     - Defaults to `false`
     - When set to `true`, queries that match the refetch predicate and are not being rendered via `useQuery` and friends will be both marked as invalid and also refetched in the background
-- `refetchOptions?: RefetchOptions`:
-  - `throwOnError?: boolean`
-    - When set to `true`, this method will throw if any of the query refetch tasks fail.
   - `refetchPage: (page: TData, index: number, allPages: TData[]) => boolean`
     - Only for [Infinite Queries](../guides/infinite-queries#refetchpage)
     - Use this function to specify which pages should be refetched
+- `refetchOptions?: RefetchOptions`:
+  - `throwOnError?: boolean`
+    - When set to `true`, this method will throw if any of the query refetch tasks fail.
 
 ## `queryClient.refetchQueries`
 
@@ -318,12 +318,12 @@ await queryClient.refetchQueries(['posts', 1], { active: true, exact: true })
 
 - `queryKey?: QueryKey`: [Query Keys](../guides/query-keys)
 - `filters?: QueryFilters`: [Query Filters](../guides/filters#query-filters)
-- `refetchOptions?: RefetchOptions`:
-  - `throwOnError?: boolean`
-    - When set to `true`, this method will throw if any of the query refetch tasks fail.
   - `refetchPage: (page: TData, index: number, allPages: TData[]) => boolean`
     - Only for [Infinite Queries](../guides/infinite-queries#refetchpage)
     - Use this function to specify which pages should be refetched
+- `refetchOptions?: RefetchOptions`:
+  - `throwOnError?: boolean`
+    - When set to `true`, this method will throw if any of the query refetch tasks fail.
 
 **Returns**
 
@@ -384,12 +384,12 @@ queryClient.resetQueries(queryKey, { exact: true })
 
 - `queryKey?: QueryKey`: [Query Keys](../guides/query-keys)
 - `filters?: QueryFilters`: [Query Filters](../guides/filters#query-filters)
-- `resetOptions?: ResetOptions`:
-  - `throwOnError?: boolean`
-    - When set to `true`, this method will throw if any of the query refetch tasks fail.
   - `refetchPage: (page: TData, index: number, allPages: TData[]) => boolean`
     - Only for [Infinite Queries](../guides/infinite-queries#refetchpage)
     - Use this function to specify which pages should be refetched
+- `resetOptions?: ResetOptions`:
+  - `throwOnError?: boolean`
+    - When set to `true`, this method will throw if any of the query refetch tasks fail.
 
 **Returns**
 

src/core/infiniteQueryBehavior.ts

@@ -4,7 +4,7 @@ import type {
   InfiniteData,
   QueryFunctionContext,
   QueryOptions,
-  RefetchPageOptions,
+  RefetchQueryFilters,
 } from './types'
 
 export function infiniteQueryBehavior<
@@ -15,7 +15,7 @@ export function infiniteQueryBehavior<
   return {
     onFetch: context => {
       context.fetchFn = () => {
-        const refetchPage: RefetchPageOptions['refetchPage'] | undefined =
+        const refetchPage: RefetchQueryFilters['refetchPage'] | undefined =
           context.fetchOptions?.meta?.refetchPage
         const fetchMore = context.fetchOptions?.meta?.fetchMore
         const pageParam = fetchMore?.pageParam

src/core/queryClient.ts

@@ -24,7 +24,9 @@ import type {
   QueryObserverOptions,
   QueryOptions,
   RefetchOptions,
+  RefetchQueryFilters,
   ResetOptions,
+  ResetQueryFilters,
 } from './types'
 import type { QueryState, SetDataOptions } from './query'
 import { QueryCache } from './queryCache'
@@ -182,21 +184,24 @@ export class QueryClient {
     })
   }
 
-  resetQueries(filters?: QueryFilters, options?: ResetOptions): Promise<void>
+  resetQueries(
+    filters?: ResetQueryFilters,
+    options?: ResetOptions
+  ): Promise<void>
   resetQueries(
     queryKey?: QueryKey,
-    filters?: QueryFilters,
+    filters?: ResetQueryFilters,
     options?: ResetOptions
   ): Promise<void>
   resetQueries(
-    arg1?: QueryKey | QueryFilters,
-    arg2?: QueryFilters | ResetOptions,
+    arg1?: QueryKey | ResetQueryFilters,
+    arg2?: ResetQueryFilters | ResetOptions,
     arg3?: ResetOptions
   ): Promise<void> {
     const [filters, options] = parseFilterArgs(arg1, arg2, arg3)
     const queryCache = this.queryCache
 
-    const refetchFilters: QueryFilters = {
+    const refetchFilters: RefetchQueryFilters = {
       ...filters,
       active: true,
     }
@@ -249,7 +254,7 @@ export class QueryClient {
   ): Promise<void> {
     const [filters, options] = parseFilterArgs(arg1, arg2, arg3)
 
-    const refetchFilters: QueryFilters = {
+    const refetchFilters: RefetchQueryFilters = {
       ...filters,
       // if filters.refetchActive is not provided and filters.active is explicitly false,
       // e.g. invalidateQueries({ active: false }), we don't want to refetch active queries
@@ -266,25 +271,25 @@ export class QueryClient {
   }
 
   refetchQueries(
-    filters?: QueryFilters,
+    filters?: RefetchQueryFilters,
     options?: RefetchOptions
   ): Promise<void>
   refetchQueries(
     queryKey?: QueryKey,
-    filters?: QueryFilters,
+    filters?: RefetchQueryFilters,
     options?: RefetchOptions
   ): Promise<void>
   refetchQueries(
-    arg1?: QueryKey | QueryFilters,
-    arg2?: QueryFilters | RefetchOptions,
+    arg1?: QueryKey | RefetchQueryFilters,
+    arg2?: RefetchQueryFilters | RefetchOptions,
     arg3?: RefetchOptions
   ): Promise<void> {
     const [filters, options] = parseFilterArgs(arg1, arg2, arg3)
 
     const promises = notifyManager.batch(() =>
       this.queryCache.findAll(filters).map(query =>
         query.fetch(undefined, {
-          meta: { refetchPage: options?.refetchPage },
+          meta: { refetchPage: filters?.refetchPage },
         })
       )
     )

src/core/queryObserver.ts

@@ -1,3 +1,4 @@
+import { RefetchQueryFilters } from './types'
 import {
   isServer,
   isValidTimeout,
@@ -275,7 +276,7 @@ export class QueryObserver<
   }
 
   refetch(
-    options?: RefetchOptions<TData>
+    options?: RefetchOptions & RefetchQueryFilters<TData>
   ): Promise<QueryObserverResult<TData, TError>> {
     return this.fetch({
       ...options,

src/core/tests/queryClient.test.tsx

@@ -944,10 +944,10 @@ describe('queryClient', () => {
 
       multiplier = 2
 
-      await queryClient.refetchQueries(
-        { queryKey: key },
-        { refetchPage: (_, index) => index === 0 }
-      )
+      await queryClient.refetchQueries({
+        queryKey: key,
+        refetchPage: (_, index) => index === 0,
+      })
 
       expect(queryClient.getQueryData(key)).toMatchObject({
         pages: [20, 11],
@@ -971,14 +971,13 @@ describe('queryClient', () => {
 
       multiplier = 2
 
-      await queryClient.invalidateQueries(
-        { queryKey: key, refetchInactive: true },
-        {
-          refetchPage: (page, _, allPages) => {
-            return page === allPages[0]
-          },
-        }
-      )
+      await queryClient.invalidateQueries({
+        queryKey: key,
+        refetchInactive: true,
+        refetchPage: (page, _, allPages) => {
+          return page === allPages[0]
+        },
+      })
 
       expect(queryClient.getQueryData(key)).toMatchObject({
         pages: [20, 11],
@@ -1004,14 +1003,13 @@ describe('queryClient', () => {
 
       multiplier = 2
 
-      await queryClient.resetQueries(
-        { queryKey: key, inactive: true },
-        {
-          refetchPage: (page, _, allPages) => {
-            return page === allPages[0]
-          },
-        }
-      )
+      await queryClient.resetQueries({
+        queryKey: key,
+        inactive: true,
+        refetchPage: (page, _, allPages) => {
+          return page === allPages[0]
+        },
+      })
 
       expect(queryClient.getQueryData(key)).toMatchObject({
         pages: [20, 11],

src/core/types.ts

@@ -236,30 +236,38 @@ export interface ResultOptions {
   throwOnError?: boolean
 }
 
-export interface RefetchPageOptions<TQueryFnData = unknown> {
-  refetchPage: (
+export interface RefetchPageFilters<TQueryFnData = unknown> {
+  refetchPage?: (
     lastPage: TQueryFnData,
     index: number,
     allPages: TQueryFnData[]
   ) => boolean
 }
 
-export interface RefetchOptions<TQueryFnData = unknown>
-  extends ResultOptions,
-    RefetchPageOptions<TQueryFnData> {
+export interface RefetchOptions extends ResultOptions {
   cancelRefetch?: boolean
 }
 
-export interface InvalidateQueryFilters extends QueryFilters {
+export interface InvalidateQueryFilters<TQueryFnData = unknown>
+  extends QueryFilters,
+    RefetchPageFilters<TQueryFnData> {
   refetchActive?: boolean
   refetchInactive?: boolean
 }
 
-export interface InvalidateOptions extends RefetchPageOptions {
+export interface RefetchQueryFilters<TQueryFnData = unknown>
+  extends QueryFilters,
+    RefetchPageFilters<TQueryFnData> {}
+
+export interface ResetQueryFilters<TQueryFnData = unknown>
+  extends QueryFilters,
+    RefetchPageFilters<TQueryFnData> {}
+
+export interface InvalidateOptions {
   throwOnError?: boolean
 }
 
-export interface ResetOptions extends RefetchPageOptions {
+export interface ResetOptions {
   throwOnError?: boolean
 }
 
@@ -292,7 +300,7 @@ export interface QueryObserverBaseResult<TData = unknown, TError = unknown> {
   isStale: boolean
   isSuccess: boolean
   refetch: (
-    options?: RefetchOptions<TData>
+    options?: RefetchOptions & RefetchQueryFilters<TData>
   ) => Promise<QueryObserverResult<TData, TError>>
   remove: () => void
   status: QueryStatus