add query key hashing, add preprocessors

Author: KurtGokhan

examples/vite/src/App.tsx

@@ -2,7 +2,7 @@ import './mocks';
 import { useRef, useState } from 'react';
 import { CommentData, PostData, baseUrl } from './mocks';
 import './App.css';
-import { HttpQueryBuilder, MiddlewareContext, useOperateOnTags } from 'react-query-builder';
+import { HttpQueryBuilder, useOperateOnTags } from 'react-query-builder';
 import { queryClient } from './client';
 
 const baseQuery = new HttpQueryBuilder({
@@ -23,13 +23,10 @@ const postQuery = baseQuery
   .withPath('/posts/:id')
   .withData<PostData>()
   .withTags((ctx) => ({ type: 'posts' as any, id: ctx.data.id }))
+  .withPreprocessor<{ id: number }>((vars) => ({ ...vars, params: { id: vars.id } }))
   .withMiddleware(async (ctx, next) => {
     const res = await next(ctx);
     return { ...res, titleUppercase: res.title.toUpperCase() };
-  })
-  .withMiddleware((ctx: MiddlewareContext<{ id: number }>, next) => {
-    const { id, ...vars } = ctx.vars;
-    return next({ ...ctx, vars: { ...vars, params: { id } } });
   });
 
 const commentsQuery = baseQuery
@@ -114,7 +111,6 @@ function App() {
                     onClick={() => setPostId(post.id)}
                     onMouseOver={() => {
                       postQuery.client.prefetch({ id: post.id });
-                      commentsQuery.client.prefetch({ search: { postId: post.id } });
                     }}
                   >
                     {post.title}

src/builder/HttpMutationBuilder.ts

@@ -1,8 +1,6 @@
 import { ExtractPathParams, HttpMethod } from '../http/types';
 import { WithOptional } from '../types/utils';
-import { HttpQueryBuilder } from './HttpQueryBuilder';
 import { MutationBuilder, MutationBuilderConfig } from './MutationBuilder';
-import { QueryBuilder } from './QueryBuilder';
 import { MiddlewareFn } from './createMiddlewareFunction';
 import {
   HttpBaseHeaders,
@@ -90,7 +88,4 @@ export class HttpMutationBuilder<
   declare withMiddleware: <TVars = T['vars'], TData = T['data'], TError = T['error']>(
     middleware: MiddlewareFn<TVars, TData, TError, T>,
   ) => HttpMutationBuilder<SetAllTypes<T, TData, TError, TVars, true>>;
-
-  declare asQueryBuilder: () => HttpQueryBuilder<T>;
-  protected override QueryBuilderConstructor: typeof QueryBuilder = HttpQueryBuilder as typeof QueryBuilder;
 }

src/builder/HttpQueryBuilder.ts

@@ -4,6 +4,7 @@ import { HttpMutationBuilder } from './HttpMutationBuilder';
 import { MutationBuilder } from './MutationBuilder';
 import { QueryBuilder, QueryBuilderConfig } from './QueryBuilder';
 import { MiddlewareFn } from './createMiddlewareFunction';
+import { PreprocessorFn } from './createPreprocessorFunction';
 import {
   HttpBaseHeaders,
   HttpBaseParams,
@@ -14,13 +15,14 @@ import {
   SetErrorType,
 } from './types';
 import { AppendVarsType } from './types';
-import { createHttpQueryFn, mergeHttpVars } from './utils';
+import { createHttpQueryFn, createHttpQueryHashFn, mergeHttpVars } from './utils';
 
 export class HttpQueryBuilder<T extends HttpBuilderTypeTemplate = HttpBuilderTypeTemplate> extends QueryBuilder<T> {
   constructor(config?: WithOptional<QueryBuilderConfig<T>, 'queryFn'>) {
     const mergeVars = config?.mergeVars || mergeHttpVars;
     const queryFn = config?.queryFn || createHttpQueryFn<T>(mergeVars);
-    super({ mergeVars, queryFn, ...config });
+    const queryKeyHashFn = config?.queryKeyHashFn || createHttpQueryHashFn();
+    super({ mergeVars, queryFn, queryKeyHashFn, ...config });
   }
 
   withBody<TBody>(body?: TBody): HttpQueryBuilder<AppendVarsType<T, { body: TBody }>> {
@@ -77,6 +79,10 @@ export class HttpQueryBuilder<T extends HttpBuilderTypeTemplate = HttpBuilderTyp
     reset?: TReset,
   ) => HttpQueryBuilder<AppendVarsType<T, Partial<TVars>, TReset>>;
 
+  declare withPreprocessor: <TVars = T['vars']>(
+    preprocessor: PreprocessorFn<TVars, T['vars']>,
+  ) => HttpQueryBuilder<AppendVarsType<T, TVars, true, true>>;
+
   declare withMiddleware: <TVars = T['vars'], TData = T['data'], TError = T['error']>(
     middleware: MiddlewareFn<TVars, TData, TError, T>,
   ) => HttpQueryBuilder<SetAllTypes<T, TData, TError, TVars, true>>;

src/builder/MutationBuilder.ts

@@ -13,10 +13,9 @@ import {
   useQueryClient,
 } from '@tanstack/react-query';
 import { QueryTagOption, QueryUpdateTagObject } from '../tags/types';
-import { QueryBuilder } from './QueryBuilder';
 import { MiddlewareFn, createMiddlewareFunction } from './createMiddlewareFunction';
 import { createUpdateMiddleware } from './createUpdateMiddleware';
-import { BuilderMergeVarsFn, BuilderQueryFn, SetAllTypes, SetDataType, SetErrorType } from './types';
+import { BuilderConfig, SetAllTypes, SetDataType, SetErrorType } from './types';
 import { AppendVarsType, BuilderTypeTemplate } from './types';
 import { areKeysEqual, mergeMutationOptions, mergeVars } from './utils';
 
@@ -200,27 +199,8 @@ export class MutationBuilder<T extends BuilderTypeTemplate = BuilderTypeTemplate
   freeze(): MutationBuilderFrozen<T> {
     return this;
   }
-
-  protected QueryBuilderConstructor: typeof QueryBuilder = QueryBuilder;
-
-  asQueryBuilder(): QueryBuilder<T> {
-    return new this.QueryBuilderConstructor({
-      queryFn: this.config.queryFn,
-      queryClient: this.config.queryClient,
-      mergeVars: this.config.mergeVars,
-      vars: this.config.vars,
-      syncChannel: this.config.syncChannel,
-    });
-  }
 }
 
-export type MutationBuilderConfig<T extends BuilderTypeTemplate> = {
-  queryFn: BuilderQueryFn<T>;
-
-  vars?: Partial<T['vars']>;
-  mergeVars?: BuilderMergeVarsFn<T['vars']>;
-
+export type MutationBuilderConfig<T extends BuilderTypeTemplate> = BuilderConfig<T> & {
   options?: UseMutationOptions<T['data'], T['error'], T['vars']>;
-  queryClient?: QueryClient;
-  syncChannel?: BroadcastChannel;
 };

src/builder/QueryBuilder.ts

@@ -2,7 +2,6 @@ import {
   CancelOptions,
   DataTag,
   InvalidateOptions,
-  QueryClient,
   QueryFilters,
   QueryFunction,
   RefetchOptions,
@@ -21,15 +20,9 @@ import { QueryTagOption } from '../tags/types';
 import { FunctionType } from '../types/utils';
 import { MutationBuilder } from './MutationBuilder';
 import { MiddlewareFn, createMiddlewareFunction } from './createMiddlewareFunction';
+import { PreprocessorFn, createPreprocessorFunction, identityPreprocessor } from './createPreprocessorFunction';
 import { createTagMiddleware } from './createTagMiddleware';
-import {
-  BuilderMergeVarsFn,
-  BuilderQueriesResult,
-  BuilderQueryFn,
-  SetAllTypes,
-  SetDataType,
-  SetErrorType,
-} from './types';
+import { BuilderConfig, BuilderQueriesResult, SetAllTypes, SetDataType, SetErrorType } from './types';
 import { AppendVarsType, BuilderTypeTemplate } from './types';
 import { mergeQueryOptions, mergeVars } from './utils';
 
@@ -52,23 +45,33 @@ export class QueryBuilderFrozen<T extends BuilderTypeTemplate> {
     return mergeVars(list, this.config.mergeVars);
   };
 
-  getQueryFn: () => QueryFunction<T['data'], [T['vars']]> = () => {
+  protected preprocessVars: (vars: T['vars']) => T['queryKey'][0] = (vars) => {
+    if (!this.config.preprocessorFn) return vars as T['queryKey'][0];
+    return this.config.preprocessorFn(vars);
+  };
+
+  getQueryFn: () => QueryFunction<T['data'], T['queryKey']> = () => {
     return ({ client, meta, queryKey, signal, pageParam }) => {
       return this.config.queryFn({ client, meta, queryKey, signal, pageParam, originalQueryKey: queryKey });
     };
   };
 
-  getQueryKey: (vars: T['vars']) => DataTag<[T['vars']], T['data'], T['error']> = (vars) => {
-    return [this.mergeVars([this.config.vars, vars])] as DataTag<[T['vars']], T['data'], T['error']>;
+  getQueryKey: (vars: T['vars']) => DataTag<T['queryKey'], T['data'], T['error']> = (vars) => {
+    return [this.preprocessVars(this.mergeVars([this.config.vars, vars]))] as DataTag<
+      T['queryKey'],
+      T['data'],
+      T['error']
+    >;
   };
 
   getQueryOptions: (
     vars: T['vars'],
     opts?: QueryBuilderConfig<T>['options'],
-  ) => UseQueryOptions<T['data'], T['error'], T['data'], [T['vars']]> & { queryFn: FunctionType } = (vars, opts) => {
+  ) => UseQueryOptions<T['data'], T['error'], T['data'], T['queryKey']> & { queryFn: FunctionType } = (vars, opts) => {
     return mergeQueryOptions([
       {
         queryFn: this.getQueryFn(),
+        queryKeyHashFn: this.config.queryKeyHashFn,
         queryKey: this.getQueryKey(vars),
       },
       this.config.options,
@@ -79,21 +82,21 @@ export class QueryBuilderFrozen<T extends BuilderTypeTemplate> {
   useQuery: (
     vars: T['vars'],
     opts?: QueryBuilderConfig<T>['options'],
-  ) => ReturnType<typeof useQuery<T['data'], T['error'], T['data'], [T['vars']]>> = (vars, opts) => {
+  ) => ReturnType<typeof useQuery<T['data'], T['error'], T['data'], T['queryKey']>> = (vars, opts) => {
     return useQuery(this.getQueryOptions(vars, opts), this.config.queryClient);
   };
 
   useSuspenseQuery: (
     vars: T['vars'],
     opts?: QueryBuilderConfig<T>['options'],
-  ) => ReturnType<typeof useSuspenseQuery<T['data'], T['error'], T['data'], [T['vars']]>> = (vars, opts) => {
+  ) => ReturnType<typeof useSuspenseQuery<T['data'], T['error'], T['data'], T['queryKey']>> = (vars, opts) => {
     return useSuspenseQuery(this.getQueryOptions(vars, opts), this.config.queryClient);
   };
 
   usePrefetchQuery: (
     vars: T['vars'],
     opts?: QueryBuilderConfig<T>['options'],
-  ) => ReturnType<typeof usePrefetchQuery<T['data'], T['error'], T['data'], [T['vars']]>> = (vars, opts) => {
+  ) => ReturnType<typeof usePrefetchQuery<T['data'], T['error'], T['data'], T['queryKey']>> = (vars, opts) => {
     return usePrefetchQuery(this.getQueryOptions(vars, opts), this.config.queryClient);
   };
 
@@ -147,7 +150,7 @@ export class QueryBuilderFrozen<T extends BuilderTypeTemplate> {
 
 class QueryBuilderClient<
   T extends BuilderTypeTemplate,
-  TFilters = QueryFilters<T['data'], T['error'], T['data'], [T['vars']]>,
+  TFilters = QueryFilters<T['data'], T['error'], T['data'], T['queryKey']>,
 > {
   constructor(private builder: QueryBuilderFrozen<T>) {}
 
@@ -182,7 +185,7 @@ class QueryBuilderClient<
     this.builder.config.queryClient?.getQueryData<T['data']>(this.builder.getQueryKey(vars));
 
   readonly setData = (vars: T['vars'], updater: Updater<T['data']>, opts?: SetDataOptions) =>
-    this.builder.config.queryClient?.setQueryData(this.builder.getQueryKey(vars), updater, opts);
+    this.builder.config.queryClient?.setQueryData<T['data']>(this.builder.getQueryKey(vars), updater, opts);
 
   readonly getState = (vars: T['vars']) =>
     this.builder.config.queryClient?.getQueryState<T['data'], T['error']>(this.builder.getQueryKey(vars));
@@ -214,6 +217,16 @@ export class QueryBuilder<T extends BuilderTypeTemplate = BuilderTypeTemplate> e
     return new ctor<T>(newConfig) as this;
   }
 
+  withPreprocessor<TVars = T['vars']>(
+    preprocessor: PreprocessorFn<TVars, T['vars']>,
+  ): QueryBuilder<AppendVarsType<T, TVars, true, true>> {
+    const newBuilder = this as unknown as QueryBuilder<AppendVarsType<T, TVars, true, true>>;
+
+    return newBuilder.withConfig({
+      preprocessorFn: createPreprocessorFunction(preprocessor, this.config.preprocessorFn || identityPreprocessor),
+    });
+  }
+
   withMiddleware<TVars = T['vars'], TData = T['data'], TError = T['error']>(
     middleware: MiddlewareFn<TVars, TData, TError, T>,
     config?: Partial<QueryBuilderConfig<SetAllTypes<T, TData, TError, TVars, true>>>,
@@ -249,25 +262,13 @@ export class QueryBuilder<T extends BuilderTypeTemplate = BuilderTypeTemplate> e
   protected MutationBuilderConstructor: typeof MutationBuilder = MutationBuilder;
 
   asMutationBuilder(): MutationBuilder<T> {
-    return new this.MutationBuilderConstructor({
-      queryFn: this.config.queryFn,
-      queryClient: this.config.queryClient,
-      mergeVars: this.config.mergeVars,
-      vars: this.config.vars,
-      syncChannel: this.config.syncChannel,
-    });
+    const { options, ...restConfig } = this.config;
+    return new this.MutationBuilderConstructor(restConfig);
   }
 }
 
 type Updater<T> = T | undefined | ((oldData: T | undefined) => T | undefined);
 
-export type QueryBuilderConfig<T extends BuilderTypeTemplate> = {
-  queryFn: BuilderQueryFn<T>;
-  vars?: Partial<T['vars']>;
-  mergeVars?: BuilderMergeVarsFn<T['vars']>;
-
-  options?: Partial<UseQueryOptions<T['data'], T['error'], T['data'], [T['vars']]> & { queryFn: FunctionType }>;
-
-  queryClient?: QueryClient;
-  syncChannel?: BroadcastChannel;
+export type QueryBuilderConfig<T extends BuilderTypeTemplate> = BuilderConfig<T> & {
+  options?: Partial<UseQueryOptions<T['data'], T['error'], T['data'], T['queryKey']> & { queryFn: FunctionType }>;
 };

src/builder/createMiddlewareFunction.ts

@@ -3,21 +3,23 @@ import { QueryBuilderConfig } from './QueryBuilder';
 import type { BuilderQueryContext, BuilderQueryFn, BuilderTypeTemplate, SetAllTypes } from './types';
 
 export type MiddlewareFn<TVars, TData, TError, TOriginalTemplate extends BuilderTypeTemplate> = (
-  context: MiddlewareContext<TVars>,
+  context: MiddlewareContext<TOriginalTemplate['queryKey']>,
   next: MiddlewareNextFn<TOriginalTemplate>,
   throwError: (error: TError) => never,
   config: QueryBuilderConfig<TOriginalTemplate> | MutationBuilderConfig<TOriginalTemplate>,
 ) => TData | Promise<TData>;
 
-export type MiddlewareContext<TVars> = BuilderQueryContext<TVars> & {
-  vars: TVars;
+export type MiddlewareContext<TKey extends unknown[]> = BuilderQueryContext<TKey> & {
+  vars: TKey[0];
 };
 
 export type MiddlewareNextFn<T extends BuilderTypeTemplate> = (
-  context: Omit<MiddlewareContext<T['vars']>, 'queryKey'>,
+  context: Omit<MiddlewareContext<T['queryKey']>, 'queryKey'>,
 ) => Promise<T['data']>;
 
-const createMiddlewareContext = <TVars>(context: BuilderQueryContext<TVars>): MiddlewareContext<TVars> => {
+const createMiddlewareContext = <TKey extends unknown[]>(
+  context: BuilderQueryContext<TKey>,
+): MiddlewareContext<TKey> => {
   return {
     ...context,
     vars: context.queryKey[0],
@@ -35,7 +37,7 @@ export const createMiddlewareFunction = <TVars, TData, TError, TOriginalTemplate
 ): BuilderQueryFn<SetAllTypes<TOriginalTemplate, TData, TError, TVars, true>> => {
   return async (context) =>
     middleware(
-      createMiddlewareContext<TVars>(context),
+      createMiddlewareContext<TOriginalTemplate['queryKey']>(context),
       async (ctx) => originalFn({ ...context, queryKey: [ctx.vars] }),
       throwError,
       config,

src/builder/createPreprocessorFunction.ts

@@ -0,0 +1,10 @@
+export type PreprocessorFn<TVars, TOriginalVars> = (vars: TVars) => TOriginalVars;
+
+export const identityPreprocessor = <TVars = unknown, TOut = TVars>(vars: TVars): TOut => vars as unknown as TOut;
+
+export const createPreprocessorFunction = <TVars, TOriginalVars>(
+  preprocessor: PreprocessorFn<TVars, TOriginalVars>,
+  originalFn: PreprocessorFn<TOriginalVars, any> = identityPreprocessor,
+): PreprocessorFn<TVars, any> => {
+  return (context) => originalFn(preprocessor(context));
+};

src/builder/createTagMiddleware.ts

@@ -10,7 +10,7 @@ type CreateTagMiddleware = <T extends BuilderTypeTemplate>(
 ) => MiddlewareFn<T['vars'], T['data'], T['error'], T>;
 
 export const createTagMiddleware: CreateTagMiddleware = (tags, cacheId) =>
-  async function tagMiddlware(ctx, next) {
+  async function tagMiddlware(ctx, next, _, config) {
     let resolvedTags: QueryTagObject[] = [];
 
     try {
@@ -24,7 +24,8 @@ export const createTagMiddleware: CreateTagMiddleware = (tags, cacheId) =>
 
       throw error;
     } finally {
-      const hash = hashKey(ctx.originalQueryKey);
+      const hashFn = config?.queryKeyHashFn ?? hashKey;
+      const hash = hashFn(ctx.originalQueryKey as any);
       const tagCache = ((ctx.client as any).tagCache ??= {}) as QueryTagCache;
       const tags = (tagCache[hash] ??= {});
       tags[cacheId] = resolvedTags;