separate tag operations to another class

Author: KurtGokhan

examples/vite/src/App.tsx

@@ -90,14 +90,14 @@ function App() {
 
   const deleteErrors = deletePostMutation.useMutationState(undefined, { status: 'error' }, (x) => x.state.variables?.params.id);
 
-  const refresh = () => builder.client.operateTags({ tags: 'refreshable', operation: 'reset' });
+  const reload = () => builder.tags.reset({ tags: 'refreshable' });
 
   if (postId != null) return <PostPage postId={postId} onBack={() => setPostId(null)} />;
 
   return (
     <>
-      <button onClick={refresh} disabled={posts.isFetching}>
-        Refresh
+      <button onClick={reload} disabled={posts.isFetching}>
+        Reload
       </button>
 
       <button onClick={() => reset.mutateAsync({})} disabled={reset.isPending}>

src/builder/QueryBuilderClient.ts

@@ -9,10 +9,6 @@ import type {
   SetDataOptions,
 } from '@tanstack/react-query';
 import { MutationObserver } from '@tanstack/react-query';
-import { operateOnTags } from '../tags/operateOnTags';
-import { QueryTagContext, QueryUpdateTag, TagOperationOptions } from '../tags/types';
-import { updateTags } from '../tags/updateTags';
-import { WithOptional } from '../type-utils';
 import { QueryBuilderFrozen } from './QueryBuilderFrozen';
 import { BuilderConfig } from './types';
 
@@ -86,22 +82,6 @@ export class QueryBuilderClient<
     const observer = new MutationObserver<TData, TError, TVars>(client, options);
     return observer.mutate(vars, options).finally(() => observer.reset());
   };
-
-  readonly operateTags = ({ tags = [], operation = 'invalidate', filters, options }: TagOperationOptions<TTags>) =>
-    operateOnTags({ queryClient: this.builder.config.queryClient!, tags, operation }, filters, options);
-
-  /**
-   * This function can be used to operate on queries based on tags.
-   */
-  readonly updateTags = ({
-    tags = [],
-    ctx: { client = this.builder.config.queryClient, ...ctx },
-    optimistic = false,
-  }: {
-    tags: readonly QueryUpdateTag<TVars, TData, TError, TTags>[];
-    ctx: WithOptional<QueryTagContext<TVars, TData, TError>, 'client'>;
-    optimistic?: boolean;
-  }) => updateTags({ tags, queryClient: client!, ctx: { client: client!, ...ctx }, optimistic });
 }
 
 type SetDataUpdater<T> = T | undefined | ((oldData: T | undefined) => T | undefined);

src/builder/QueryBuilderFrozen.ts

@@ -28,10 +28,9 @@ import {
   useSuspenseQueries,
   useSuspenseQuery,
 } from '@tanstack/react-query';
-import { operateOnTags } from '../tags/operateOnTags';
-import { TagOperationOptions } from '../tags/types';
 import { FunctionType, TODO, WithRequired } from '../type-utils';
 import { QueryBuilderClient } from './QueryBuilderClient';
+import { QueryBuilderTagsManager } from './QueryBuilderTagsManager';
 import { BuilderOptions, mergeBuilderOptions } from './options';
 import { BuilderConfig, BuilderQueriesResult } from './types';
 import { areKeysEqual, getRandomKey, mergeMutationOptions, mergeVars } from './utils';
@@ -301,25 +300,13 @@ export class QueryBuilderFrozen<
 
   //#endregion
 
-  /**
-   * This hook returns a function that can be used to operate on queries based on tags.
-   * It also returns the mutation object that can be used to track the state of the operation.
-   * See `operateOnTags` for more information.
-   */
-  useTagOperation(opts?: TagOperationOptions<TTags> | void) {
-    const queryClient = useQueryClient();
-    const mutationFn: MutationFunction<unknown, TagOperationOptions<TTags> | void> = (
-      { tags = [], operation = 'invalidate', filters, options } = opts || {},
-    ) => operateOnTags({ queryClient, tags, operation }, filters, options);
-
-    const mutation = useMutation({ mutationFn });
-    const operate = mutation.mutateAsync;
-
-    return [operate, mutation] as const;
-  }
-
   private _client?: QueryBuilderClient<TVars, TData, TError, TKey, TTags>;
   get client() {
     return (this._client ??= new QueryBuilderClient(this));
   }
+
+  private _tags?: QueryBuilderTagsManager<TVars, TData, TError, TKey, TTags>;
+  get tags() {
+    return (this._tags ??= new QueryBuilderTagsManager(this));
+  }
 }

src/builder/QueryBuilderTagsManager.ts

@@ -0,0 +1,51 @@
+import { MutationFunction, useMutation, useQueryClient } from '@tanstack/react-query';
+import { operateOnTags } from '../tags/operateOnTags';
+import { QueryTagContext, QueryUpdateTag, TagOperationOptions } from '../tags/types';
+import { updateTags } from '../tags/updateTags';
+import { WithOptional } from '../type-utils';
+import { QueryBuilderFrozen } from './QueryBuilderFrozen';
+import { 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>) {}
+
+  /**
+   * This hook returns a function that can be used to operate on queries based on tags.
+   * It also returns the mutation object that can be used to track the state of the operation.
+   */
+  useOperation(opts?: TagOperationOptions<TTags> | void) {
+    const queryClient = useQueryClient(this.builder.config.queryClient);
+    const mutationFn: MutationFunction<unknown, TagOperationOptions<TTags> | void> = (
+      { tags = [], operation = 'invalidate', filters, options } = opts || {},
+    ) => operateOnTags({ queryClient, tags, operation }, filters, options);
+
+    const mutation = useMutation({ mutationFn });
+    const operate = mutation.mutateAsync;
+
+    return [operate, mutation] as const;
+  }
+
+  readonly operate = ({ tags = [], operation = 'invalidate', filters, options }: TagOperationOptions<TTags>) =>
+    operateOnTags({ queryClient: this.builder.config.queryClient!, tags, operation }, filters, options);
+
+  readonly cancel = (args: Omit<TagOperationOptions<TTags>, 'operation'>) => this.operate({ ...args, operation: 'cancel' });
+  readonly invalidate = (args: Omit<TagOperationOptions<TTags>, 'operation'>) => this.operate({ ...args, operation: 'invalidate' });
+  readonly refetch = (args: Omit<TagOperationOptions<TTags>, 'operation'>) => this.operate({ ...args, operation: 'refetch' });
+  readonly remove = (args: Omit<TagOperationOptions<TTags>, 'operation'>) => this.operate({ ...args, operation: 'remove' });
+  readonly reset = (args: Omit<TagOperationOptions<TTags>, 'operation'>) => this.operate({ ...args, operation: 'reset' });
+
+  /**
+   * This function can be used to update the queries in cache based on given tags.
+   */
+  readonly update = ({
+    tags = [],
+    optimistic = false,
+    client = this.builder.config.queryClient,
+    ...ctx
+  }: {
+    tags: readonly QueryUpdateTag<TVars, TData, TError, TTags>[];
+    optimistic?: boolean;
+  } & WithOptional<QueryTagContext<TVars, TData, TError>, 'client'>) =>
+    updateTags({ tags, queryClient: client!, ctx: { client: client!, ...ctx }, optimistic });
+}

src/http/request.ts

@@ -50,7 +50,7 @@ export async function httpRequest<TData = unknown>(options: HttpRequestOptions)
 
   const resolvedHeaders = new Headers(headers as HeadersInit);
 
-  const resolvedCredentials: RequestInit['credentials'] = resolveCredentials(credentials);
+  const resolvedCredentials = resolveCredentials(credentials);
 
   const request = new Request(finalUrl, {
     method,