add withPagination with separate options

KurtGokhan · KurtGokhan · commit 2152c80cf36c · 2025-03-08T14:33:21.000+03:00
diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
@@ -33,7 +33,7 @@ const postsQuery = builder
   .withData<PostData[]>()
   .withSearch<{ page?: number }>()
   .withPagination({
-    getInitialPageParam: { search: { page: 0 } },
+    initialPageParam: { search: { page: 0 } },
     getNextPageParam: (prev, __, lastVars) => (!prev?.length ? null : { search: { page: (lastVars?.search?.page || 0) + 1 } }),
   });
 
@@ -92,7 +92,7 @@ function AppCore() {
   const [enablePrefetch, setEnablePrefetch] = useState(false);
   const [postId, setPostId] = useState<number | null>(null);
 
-  const posts = postsQuery.useInfiniteQuery({}, { enabled: postId != null });
+  const posts = postsQuery.useInfiniteQuery({}, { enabled: postId == null });
   const reset = resetMutation.useMutation();
 
   const deleteErrors = deletePostMutation.useMutationState(undefined, { status: 'error' }, (x) => x.state.variables?.params.id);
diff --git a/packages/react-query-builder/src/builder/HttpQueryBuilder.ts b/packages/react-query-builder/src/builder/HttpQueryBuilder.ts
@@ -83,7 +83,7 @@ export class HttpQueryBuilder<
   ) => HttpQueryBuilder<TParam, TSearch, TBody, THeader, TMeta, TData, TError, TTags, TFlags | 'withClient', TKey>;
 
   declare withPagination: (
-    paginationConfig: BuilderPaginationOptions<HttpBuilderVars<TParam, TSearch, TBody, THeader, TMeta>, TData, TError, TKey>,
+    paginationOptions: BuilderPaginationOptions<HttpBuilderVars<TParam, TSearch, TBody, THeader, TMeta>, TData, TError, TKey>,
   ) => HttpQueryBuilder<TParam, TSearch, TBody, THeader, TMeta, TData, TError, TTags, TFlags | 'withPagination', TKey>;
 
   withTagTypes<TTag extends string, T = unknown>(): HttpQueryBuilder<
diff --git a/packages/react-query-builder/src/builder/QueryBuilder.ts b/packages/react-query-builder/src/builder/QueryBuilder.ts
@@ -102,9 +102,9 @@ export class QueryBuilder<
   }
 
   withPagination(
-    paginationConfig: BuilderPaginationOptions<TVars, TData, TError, TKey>,
+    paginationOptions: BuilderPaginationOptions<TVars, TData, TError, TKey>,
   ): QueryBuilder<TVars, TData, TError, TKey, TTags, TFlags | 'withPagination'> {
-    return this.withConfig({ options: paginationConfig }) as any;
+    return this.withConfig({ paginationOptions }) as any;
   }
 
   freeze(): QueryBuilderFrozen<TVars, TData, TError, TKey, TTags, TFlags> {
diff --git a/packages/react-query-builder/src/builder/QueryBuilderClient.ts b/packages/react-query-builder/src/builder/QueryBuilderClient.ts
@@ -21,12 +21,13 @@ export class QueryBuilderClient<
   TFilters = QueryFilters<TData, TError, TData, TKey>,
 > {
   private declare _options: BuilderConfig<TVars, TData, TError, TKey>['options'];
+  private declare _pgOptions: BuilderConfig<TVars, TData, TError, TKey>['paginationOptions'];
   constructor(private builder: QueryBuilderFrozen<TVars, TData, TError, TKey, TTags, any>) {}
 
   readonly ensureData = (vars: TVars, opts?: typeof this._options) =>
     this.builder.config.queryClient?.ensureQueryData(this.builder.getQueryOptions(vars, opts));
 
-  readonly ensureInfiniteData = (vars: TVars, opts?: typeof this._options) =>
+  readonly ensureInfiniteData = (vars: TVars, opts?: typeof this._pgOptions) =>
     this.builder.config.queryClient?.ensureInfiniteQueryData(this.builder.getInfiniteQueryOptions(vars, opts));
 
   readonly refetch = (vars: TVars, filters?: TFilters, opts?: RefetchOptions) =>
@@ -35,7 +36,7 @@ export class QueryBuilderClient<
   readonly fetch = (vars: TVars, opts?: typeof this._options) =>
     this.builder.config.queryClient?.fetchQuery(this.builder.getQueryOptions(vars, opts));
 
-  readonly fetchInfinite = (vars: TVars, opts?: typeof this._options) =>
+  readonly fetchInfinite = (vars: TVars, opts?: typeof this._pgOptions) =>
     this.builder.config.queryClient?.fetchInfiniteQuery(this.builder.getInfiniteQueryOptions(vars, opts));
 
   readonly isFetching = (vars: TVars, filters?: TFilters) =>
@@ -44,7 +45,7 @@ export class QueryBuilderClient<
   readonly prefetch = (vars: TVars, opts?: typeof this._options) =>
     this.builder.config.queryClient?.prefetchQuery(this.builder.getQueryOptions(vars, opts));
 
-  readonly prefetchInfinite = (vars: TVars, opts?: typeof this._options) =>
+  readonly prefetchInfinite = (vars: TVars, opts?: typeof this._pgOptions) =>
     this.builder.config.queryClient?.prefetchInfiniteQuery(this.builder.getInfiniteQueryOptions(vars, opts));
 
   readonly reset = (vars: TVars, filters?: TFilters, opts?: ResetOptions) =>
diff --git a/packages/react-query-builder/src/builder/QueryBuilderFrozen.ts b/packages/react-query-builder/src/builder/QueryBuilderFrozen.ts
@@ -8,7 +8,6 @@ import {
   QueryClient,
   QueryFilters,
   QueryFunction,
-  UseInfiniteQueryOptions,
   UseInfiniteQueryResult,
   UseMutationOptions,
   UseQueryResult,
@@ -28,10 +27,10 @@ import {
   useSuspenseQueries,
   useSuspenseQuery,
 } from '@tanstack/react-query';
-import type { FunctionType, TODO, WithRequired } from '../type-utils';
+import type { TODO, WithRequired } from '../type-utils';
 import { QueryBuilderClient } from './QueryBuilderClient';
 import { QueryBuilderTagsManager } from './QueryBuilderTagsManager';
-import { type BuilderOptions, mergeBuilderOptions } from './options';
+import { type BuilderOptions, BuilderPaginationOptions, mergeBuilderOptions, mergeBuilderPaginationOptions } from './options';
 import type { BuilderConfig, BuilderFlags, BuilderQueriesResult, HasClient, HasPagination } from './types';
 import { areKeysEqual, getRandomKey, mergeMutationOptions, mergeVars } from './utils';
 
@@ -44,6 +43,7 @@ export class QueryBuilderFrozen<
   TFlags extends BuilderFlags = '',
 > {
   protected declare _options: BuilderOptions<TVars, TData, TError, TKey>;
+  protected declare _pgOptions: Partial<BuilderPaginationOptions<TVars, TData, TError, TKey>>;
 
   constructor(public readonly config: BuilderConfig<TVars, TData, TError, TKey>) {}
 
@@ -53,6 +53,7 @@ export class QueryBuilderFrozen<
       ...other,
       vars: mergeVars([config.vars, other.vars], other.mergeVars || config.mergeVars),
       options: mergeBuilderOptions([config.options, other.options]),
+      paginationOptions: mergeBuilderPaginationOptions([config.paginationOptions, other.paginationOptions]),
     };
   };
 
@@ -179,13 +180,12 @@ export class QueryBuilderFrozen<
   //#region InfiniteQuery
 
   getInfiniteQueryOptions = ((vars, opts) => {
-    // TODO: eventually allow these options as well
+    // Remove incompatible options from the base query options
     const {
       enabled,
       staleTime,
       initialData,
       placeholderData,
-      getInitialPageParam,
       refetchInterval,
       refetchOnWindowFocus,
       refetchOnReconnect,
@@ -194,38 +194,42 @@ export class QueryBuilderFrozen<
       persister,
       behavior,
       ...options
-    } = this.getQueryOptions(vars, opts, 'infiniteQuery');
-    return {
-      ...options,
-      initialPageParam: typeof getInitialPageParam === 'function' ? getInitialPageParam() : getInitialPageParam!,
-      getNextPageParam: options.getNextPageParam!,
-    };
+    } = this.config.options || {};
+
+    return mergeBuilderPaginationOptions([
+      {
+        queryFn: this.getQueryFn('infiniteQuery'),
+        queryKeyHashFn: this.getQueryKeyHashFn(),
+        queryKey: this.getQueryKey(vars),
+      },
+      options,
+      this.config.paginationOptions,
+      opts,
+    ]);
   }) as HasPagination<
     TFlags,
     (
       vars: TVars,
-      opts?: typeof this._options,
-    ) => UseInfiniteQueryOptions<TData, TError, InfiniteData<TData, Partial<TVars>>, TData, TKey, Partial<TVars>> & {
-      queryFn: FunctionType;
-    }
+      opts?: typeof this._pgOptions,
+    ) => WithRequired<BuilderPaginationOptions<TVars, TData, TError, TKey>, 'queryFn' | 'queryKey' | 'initialPageParam'>
   >;
 
   useInfiniteQuery = ((vars, opts) => {
     return useInfiniteQuery(this.getInfiniteQueryOptions(vars, opts), this.config.queryClient);
   }) as HasPagination<
     TFlags,
-    (vars: TVars, opts?: typeof this._options) => UseInfiniteQueryResult<InfiniteData<TData, Partial<TVars>>, TError>
+    (vars: TVars, opts?: typeof this._pgOptions) => UseInfiniteQueryResult<InfiniteData<TData, Partial<TVars>>, TError>
   >;
 
   usePrefetchInfiniteQuery = ((vars, opts) => {
     return usePrefetchInfiniteQuery(this.getInfiniteQueryOptions(vars, opts), this.config.queryClient);
-  }) as HasPagination<TFlags, (vars: TVars, opts?: typeof this._options) => void>;
+  }) as HasPagination<TFlags, (vars: TVars, opts?: typeof this._pgOptions) => void>;
 
   useSuspenseInfiniteQuery = ((vars, opts) => {
     return useSuspenseInfiniteQuery(this.getInfiniteQueryOptions(vars, opts), this.config.queryClient);
   }) as HasPagination<
     TFlags,
-    (vars: TVars, opts?: typeof this._options) => UseSuspenseInfiniteQueryResult<InfiniteData<TData, Partial<TVars>>, TError>
+    (vars: TVars, opts?: typeof this._pgOptions) => UseSuspenseInfiniteQueryResult<InfiniteData<TData, Partial<TVars>>, TError>
   >;
 
   //#endregion
diff --git a/packages/react-query-builder/src/builder/QueryBuilderTagsManager.ts b/packages/react-query-builder/src/builder/QueryBuilderTagsManager.ts
@@ -4,10 +4,8 @@ import type { QueryTagContext, QueryUpdateTag, TagOperationOptions } from '../ta
 import { updateTags } from '../tags/updateTags';
 import type { WithOptional } from '../type-utils';
 import type { QueryBuilderFrozen } from './QueryBuilderFrozen';
-import type { BuilderConfig } from './types';
 
 export class QueryBuilderTagsManager<TVars, TData, TError, TKey extends unknown[], TTags extends Record<string, unknown>> {
-  private declare _options: BuilderConfig<TVars, TData, TError, TKey>['options'];
   constructor(private builder: QueryBuilderFrozen<TVars, TData, TError, TKey, TTags>) {}
 
   /**
diff --git a/packages/react-query-builder/src/builder/options.ts b/packages/react-query-builder/src/builder/options.ts
@@ -1,18 +1,16 @@
-import type { GetNextPageParamFunction, GetPreviousPageParamFunction, UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
+import type { InfiniteData, UseInfiniteQueryOptions, UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
 import type { FunctionType, WithOptional } from '../type-utils';
 import { mergeQueryEnabled } from './utils';
 
-export type BuilderPaginationOptions<TVars, TData, TError, TKey extends unknown[]> = {
-  getNextPageParam: GetNextPageParamFunction<Partial<TVars>, TData>;
-  getPreviousPageParam?: GetPreviousPageParamFunction<Partial<TVars>, TData>;
-  getInitialPageParam?: Partial<TVars> | (() => Partial<TVars>);
-};
+export type BuilderPaginationOptions<TVars, TData, TError, TKey extends unknown[]> = WithOptional<
+  UseInfiniteQueryOptions<TData, TError, InfiniteData<TData, Partial<TVars>>, TData, TKey, Partial<TVars>>,
+  'queryFn' | 'queryKey' | 'initialPageParam'
+> & { queryFn?: FunctionType };
 
 export type BuilderOptions<TVars, TData, TError, TKey extends unknown[]> = WithOptional<
   UseQueryOptions<TData, TError, TData, TKey>,
   'queryFn' | 'queryKey'
-> & { queryFn?: FunctionType } & Partial<BuilderPaginationOptions<TVars, TData, TError, TKey>> &
-  Pick<
+> & { queryFn?: FunctionType } & Pick<
     UseMutationOptions<TData, TError, TVars>,
     'onError' | 'onMutate' | 'onSettled' | 'onSuccess' | 'gcTime' | 'mutationKey' | 'networkMode' | 'retry' | 'retryDelay' | 'throwOnError'
   >;
@@ -35,3 +33,22 @@ export function mergeBuilderOptions<TVars, TData, TError, TKey extends unknown[]
 
   return opts;
 }
+
+export function mergeBuilderPaginationOptions<TVars, TData, TError, TKey extends unknown[]>(
+  optsList: (Partial<BuilderPaginationOptions<TVars, TData, TError, TKey>> | undefined | null)[],
+): BuilderPaginationOptions<TVars, TData, TError, TKey> {
+  type TOpt = BuilderPaginationOptions<TVars, TData, TError, TKey>;
+  const filtered = optsList.filter(Boolean) as TOpt[];
+
+  if (filtered.length === 1) return filtered[0];
+
+  const opts = {} as TOpt;
+
+  for (const { enabled, meta, ...opt } of filtered) {
+    Object.assign(opts, opt);
+    opts.enabled = mergeQueryEnabled([opts.enabled, enabled]) as TOpt['enabled'];
+    opts.meta = { ...opts.meta, ...meta };
+  }
+
+  return opts;
+}
diff --git a/packages/react-query-builder/src/builder/types.ts b/packages/react-query-builder/src/builder/types.ts
@@ -1,7 +1,7 @@
 import type { QueryClient, QueryFunctionContext, QueryKey, UseQueryResult } from '@tanstack/react-query';
 import type { HttpRequestOptions } from '../http/types';
 import type { HasFlag, Prettify } from '../type-utils';
-import type { BuilderOptions } from './options';
+import type { BuilderOptions, BuilderPaginationOptions } from './options';
 
 export type BuilderConfig<TVars, TData, TError, TKey extends unknown[]> = {
   queryFn: BuilderQueryFn<TVars, TData, TError, TKey>;
@@ -12,6 +12,7 @@ export type BuilderConfig<TVars, TData, TError, TKey extends unknown[]> = {
   syncChannel?: BroadcastChannel;
   preprocessorFn?: (vars: TVars) => TKey[0];
   options?: BuilderOptions<TVars, TData, TError, TKey>;
+  paginationOptions?: BuilderPaginationOptions<TVars, TData, TError, TKey>;
 };
 
 export type HttpBaseHeaders = Record<string, string | string[]>;

Original file line number	Diff line number	Diff line change
`@@ -102,9 +102,9 @@ export class QueryBuilder<`
`102`	`102`	`}`
`103`	`103`
`104`	`104`	`withPagination(`
`105`		`- paginationConfig: BuilderPaginationOptions<TVars, TData, TError, TKey>,`
	`105`	`+ paginationOptions: BuilderPaginationOptions<TVars, TData, TError, TKey>,`
`106`	`106`	`): QueryBuilder<TVars, TData, TError, TKey, TTags, TFlags \| 'withPagination'> {`
`107`		`- return this.withConfig({ options: paginationConfig }) as any;`
	`107`	`+ return this.withConfig({ paginationOptions }) as any;`
`108`	`108`	`}`
`109`	`109`
`110`	`110`	`freeze(): QueryBuilderFrozen<TVars, TData, TError, TKey, TTags, TFlags> {`