add infinite queries

Author: KurtGokhan

examples/vite/src/App.tsx

@@ -21,7 +21,17 @@ const baseMutation = baseQuery.asMutationBuilder();
 
 const resetMutation = baseMutation.withPath('/reset').withUpdates('*');
 
-const postsQuery = baseQuery.withTags('refreshable', 'posts').withPath('/posts').withData<PostData[]>().withSearch<{ page?: number }>();
+const postsQuery = baseQuery
+  .withTags('refreshable', 'posts')
+  .withPath('/posts')
+  .withData<PostData[]>()
+  .withSearch<{ page?: number }>()
+  .withConfig({
+    options: {
+      initialPageParam: { search: { page: 0 } },
+      getNextPageParam: (prev, __, lastVars) => (!prev?.length ? null : { search: { page: (lastVars?.search?.page || 0) + 1 } }),
+    },
+  });
 
 const postQuery = baseQuery
   .withTags('refreshable')
@@ -77,7 +87,7 @@ const deletePostMutation = baseMutation.withMethod('delete').withPath('/posts/:i
 function App() {
   const [postId, setPostId] = useState<number | null>(null);
 
-  const posts = postsQuery.useQuery({}, { enabled: !postId });
+  const posts = postsQuery.useInfiniteQuery({}, { enabled: !postId });
   const reset = resetMutation.useMutation();
 
   const deleteErrors = deletePostMutation.useMutationState(undefined, { status: 'error' }, (x) => x.state.variables?.params.id);
@@ -100,7 +110,7 @@ function App() {
         ? 'Loading...'
         : posts.isError
           ? posts.error.message
-          : posts.data?.map((post) => (
+          : posts.data?.pages?.flat().map((post) => (
               <div key={post.id}>
                 <a>
                   <h2
@@ -125,6 +135,12 @@ function App() {
                 <p>{post.body}</p>
               </div>
             ))}
+
+      {posts.hasNextPage && (
+        <button onClick={() => posts.fetchNextPage()} disabled={posts.isFetchingNextPage}>
+          Load next page
+        </button>
+      )}
     </>
   );
 }

src/builder/MutationBuilderFrozen.ts

@@ -21,8 +21,7 @@ export type MutationBuilderConfig<TVars, TData, TError, TKey extends unknown[]>
 
 export class MutationBuilderFrozen<TVars, TData, TError, TKey extends unknown[], TTags extends Record<string, unknown>> {
   protected declare _config: MutationBuilderConfig<TVars, TData, TError, TKey>;
-  protected declare _options: typeof this._config.options;
-  protected declare _vars: TVars;
+  protected declare _options: UseMutationOptions<TData, TError, TVars>;
 
   constructor(
     public config: typeof this._config,

src/builder/QueryBuilderClient.ts

@@ -8,18 +8,27 @@ export class QueryBuilderClient<TVars, TData, TError, TKey extends unknown[], TF
   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) =>
+    this.builder.config.queryClient?.ensureInfiniteQueryData(this.builder.getInfiniteQueryOptions(vars, opts));
+
   readonly refetch = (vars: TVars, filters?: TFilters, opts?: RefetchOptions) =>
     this.builder.config.queryClient?.refetchQueries({ queryKey: this.builder.getQueryKey(vars), ...filters }, opts);
 
   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) =>
+    this.builder.config.queryClient?.fetchInfiniteQuery(this.builder.getInfiniteQueryOptions(vars, opts));
+
   readonly isFetching = (vars: TVars, filters?: TFilters) =>
     this.builder.config.queryClient?.isFetching({ queryKey: this.builder.getQueryKey(vars), ...filters });
 
   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) =>
+    this.builder.config.queryClient?.prefetchInfiniteQuery(this.builder.getInfiniteQueryOptions(vars, opts));
+
   readonly reset = (vars: TVars, filters?: TFilters, opts?: ResetOptions) =>
     this.builder.config.queryClient?.resetQueries({ queryKey: this.builder.getQueryKey(vars), ...filters }, opts);
 

src/builder/QueryBuilderFrozen.ts

@@ -1,22 +1,34 @@
 import {
   DataTag,
+  InfiniteData,
+  InfiniteQueryPageParamsOptions,
   QueryFilters,
   QueryFunction,
+  UseInfiniteQueryOptions,
+  UseInfiniteQueryResult,
   UseQueryOptions,
+  UseSuspenseInfiniteQueryResult,
+  useInfiniteQuery,
   useIsFetching,
+  usePrefetchInfiniteQuery,
   usePrefetchQuery,
   useQueries,
   useQuery,
+  useSuspenseInfiniteQuery,
   useSuspenseQueries,
   useSuspenseQuery,
 } from '@tanstack/react-query';
-import { FunctionType } from '../types/utils';
+import { FunctionType, TODO } from '../types/utils';
 import { QueryBuilderClient } from './QueryBuilderClient';
 import { BuilderConfig, BuilderQueriesResult } from './types';
 import { mergeQueryOptions, mergeVars } from './utils';
 
+export type QueryBuilderOptions<TVars, TData, TError, TKey extends unknown[]> = Partial<
+  UseQueryOptions<TData, TError, TData, TKey> & { queryFn: FunctionType } & InfiniteQueryPageParamsOptions<TData, Partial<TVars>>
+>;
+
 export type QueryBuilderConfig<TVars, TData, TError, TKey extends unknown[]> = BuilderConfig<TVars, TData, TError, TKey> & {
-  options?: Partial<UseQueryOptions<TData, TError, TData, TKey> & { queryFn: FunctionType }>;
+  options?: QueryBuilderOptions<TVars, TData, TError, TKey>;
 };
 
 export class QueryBuilderFrozen<
@@ -27,8 +39,7 @@ export class QueryBuilderFrozen<
   TTags extends Record<string, unknown> = Record<string, unknown>,
 > {
   protected declare _config: QueryBuilderConfig<TVars, TData, TError, TKey>;
-  protected declare _options: typeof this._config.options;
-  protected declare _vars: TVars;
+  protected declare _options: QueryBuilderOptions<TVars, TData, TError, TKey>;
 
   constructor(public config: typeof this._config) {}
 
@@ -50,7 +61,7 @@ export class QueryBuilderFrozen<
     return this.config.preprocessorFn(vars);
   };
 
-  getQueryFn: () => QueryFunction<TData, TKey> = () => {
+  getQueryFn: () => QueryFunction<TData, TKey, Partial<TVars>> = () => {
     return ({ client, meta, queryKey, signal, pageParam }) => {
       return this.config.queryFn({ client, meta, queryKey, signal, pageParam, originalQueryKey: queryKey });
     };
@@ -75,6 +86,16 @@ export class QueryBuilderFrozen<
     ]);
   };
 
+  getInfiniteQueryOptions: (
+    vars: TVars,
+    opts?: typeof this._options,
+  ) => UseInfiniteQueryOptions<TData, TError, InfiniteData<TData, Partial<TVars>>, TData, TKey> & { queryFn: FunctionType } = (
+    vars,
+    opts,
+  ) => {
+    return this.getQueryOptions(vars, opts) as TODO;
+  };
+
   useQuery: (vars: TVars, opts?: typeof this._options) => ReturnType<typeof useQuery<TData, TError, TData, TKey>> = (vars, opts) => {
     return useQuery(this.getQueryOptions(vars, opts), this.config.queryClient);
   };
@@ -135,6 +156,24 @@ export class QueryBuilderFrozen<
     return this.useQueriesInternal(useSuspenseQueries)(queries, sharedVars, sharedOpts);
   };
 
+  useInfiniteQuery: (vars: TVars, opts?: typeof this._options) => UseInfiniteQueryResult<InfiniteData<TData, Partial<TVars>>, TError> = (
+    vars,
+    opts,
+  ) => {
+    return useInfiniteQuery(this.getInfiniteQueryOptions(vars, opts), this.config.queryClient);
+  };
+
+  usePrefetchInfiniteQuery: (vars: TVars, opts?: typeof this._options) => void = (vars, opts) => {
+    return usePrefetchInfiniteQuery(this.getInfiniteQueryOptions(vars, opts), this.config.queryClient);
+  };
+
+  useSuspenseInfiniteQuery: (
+    vars: TVars,
+    opts?: typeof this._options,
+  ) => UseSuspenseInfiniteQueryResult<InfiniteData<TData, Partial<TVars>>, TError> = (vars, opts) => {
+    return useSuspenseInfiniteQuery(this.getInfiniteQueryOptions(vars, opts), this.config.queryClient);
+  };
+
   private _client?: QueryBuilderClient<TVars, TData, TError, TKey>;
   get client() {
     return (this._client ??= new QueryBuilderClient(this));

src/tags/updateTags.ts

@@ -1,4 +1,4 @@
-import { type QueryClient, type QueryState, useQueryClient } from '@tanstack/react-query';
+import { type InfiniteData, InfiniteQueryObserver, type QueryClient, type QueryState, useQueryClient } from '@tanstack/react-query';
 import { useStableCallback } from '../hooks/useStableCallback';
 import type { WithOptional } from '../types/utils';
 import { queryMatchesTag } from './operateOnTags';
@@ -46,7 +46,21 @@ export function updateTags({
 
     for (const q of list) {
       undos.push({ hash: q.queryHash, data: q.state.data });
-      setDataToExistingQuery(queryClient, q.queryHash, updaterFn(ctx, q.state.data), willInvalidate ? { isInvalidated: true } : undefined, {
+
+      let newData: unknown;
+      if (q.observers[0] && q.observers[0] instanceof InfiniteQueryObserver) {
+        const data = q.state.data as InfiniteData<unknown>;
+        if (data.pages && Array.isArray(data.pages)) {
+          newData = {
+            ...data,
+            pages: data.pages.map((page) => updaterFn(ctx, page)),
+          } as InfiniteData<unknown>;
+        }
+      } else {
+        newData = updaterFn(ctx, q.state.data);
+      }
+
+      setDataToExistingQuery(queryClient, q.queryHash, newData, willInvalidate ? { isInvalidated: true } : undefined, {
         updated: optimistic ? 'optimistic' : 'pessimistic',
       });
     }