bind methods in client and tags manager

Author: KurtGokhan

packages/tanstack-query-builder/src/builder/QueryBuilderClient.ts

@@ -11,6 +11,28 @@ import type {
 import { MutationObserver } from '@tanstack/react-query';
 import type { QueryBuilderFrozen } from './QueryBuilderFrozen';
 import type { BuilderConfig } from './types';
+import { bindMethods } from './utils';
+
+const methodsToBind = [
+  'ensureData',
+  'ensureInfiniteData',
+  'refetch',
+  'fetch',
+  'fetchInfinite',
+  'isFetching',
+  'prefetch',
+  'prefetchInfinite',
+  'reset',
+  'remove',
+  'cancel',
+  'invalidate',
+  'getData',
+  'setData',
+  'getState',
+  'getMutation',
+  'isMutating',
+  'mutate',
+];
 
 export class QueryBuilderClient<
   TVars,
@@ -22,7 +44,10 @@ export class QueryBuilderClient<
 > {
   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>) {}
+
+  constructor(private builder: QueryBuilderFrozen<TVars, TData, TError, TKey, TTags, any>) {
+    if (builder.config.bound) bindMethods(this, methodsToBind);
+  }
 
   ensureData(vars: TVars, opts?: typeof this._options) {
     return this.builder.config.queryClient?.ensureQueryData(this.builder.getQueryOptions(vars, opts));

packages/tanstack-query-builder/src/builder/QueryBuilderFrozen.ts

@@ -33,7 +33,7 @@ import { QueryBuilderClient } from './QueryBuilderClient';
 import { QueryBuilderTagsManager } from './QueryBuilderTagsManager';
 import { type BuilderOptions, BuilderPaginationOptions, mergeBuilderOptions, mergeBuilderPaginationOptions } from './options';
 import type { BuilderConfig, BuilderFlags, BuilderQueriesResult, HasClient, HasPagination } from './types';
-import { areKeysEqual, assertThis, getRandomKey, mergeMutationOptions, mergeVars } from './utils';
+import { areKeysEqual, assertThis, bindMethods, getRandomKey, mergeMutationOptions, mergeVars } from './utils';
 
 type UseQueriesArgs<TVars, TData, TError, TKey extends unknown[]> = [
   queries: {
@@ -79,10 +79,7 @@ export class QueryBuilderFrozen<
   TFlags extends BuilderFlags = '',
 > {
   constructor(public readonly config: BuilderConfig<TVars, TData, TError, TKey>) {
-    if (config.bound) {
-      const self = this as unknown as any;
-      for (const method of methodsToBind) self[method] = self[method].bind(self);
-    }
+    if (config.bound) bindMethods(this, methodsToBind);
   }
 
   readonly client = new QueryBuilderClient(this) as HasClient<TFlags, QueryBuilderClient<TVars, TData, TError, TKey, TTags>>;

packages/tanstack-query-builder/src/builder/QueryBuilderTagsManager.ts

@@ -4,9 +4,14 @@ import type { QueryTagContext, QueryUpdateTag, TagOperationOptions } from '../ta
 import { updateTags } from '../tags/updateTags';
 import type { WithOptional } from '../type-utils';
 import type { QueryBuilderFrozen } from './QueryBuilderFrozen';
+import { bindMethods } from './utils';
+
+const methodsToBind = ['useOperation', 'operate', 'cancel', 'invalidate', 'refetch', 'remove', 'reset', 'update'];
 
 export class QueryBuilderTagsManager<TVars, TData, TError, TKey extends unknown[], TTags extends Record<string, unknown>> {
-  constructor(private builder: QueryBuilderFrozen<TVars, TData, TError, TKey, TTags, any>) {}
+  constructor(private builder: QueryBuilderFrozen<TVars, TData, TError, TKey, TTags, any>) {
+    if (builder.config.bound) bindMethods(this, methodsToBind);
+  }
 
   /**
    * This hook returns a function that can be used to operate on queries based on tags.

packages/tanstack-query-builder/src/builder/utils.ts

@@ -56,3 +56,7 @@ export function getRandomKey() {
 export function assertThis<T>(t: T): asserts t is T & {} {
   if (t === undefined) throw new Error('Method called on unbound instance. Use `asBound` to bind methods.');
 }
+
+export function bindMethods(self: Record<string, any>, methodsToBind: string[]) {
+  for (const method of methodsToBind) self[method] = self[method].bind(self);
+}