add withPostprocessor

Author: KurtGokhan

examples/vite/src/examples/main/example.tsx

@@ -25,10 +25,7 @@ export const { useQuery: useArticle, ...articleQuery } = builder
   .withTags((ctx) => ({ type: 'article', id: ctx.data.id }))
   .withPath('/articles/: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() };
-  })
+  .withPostprocessor((data) => ({ ...data, titleUppercase: data.title.toUpperCase() }))
   .asBound();
 
 export const commentsQuery = builder

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

@@ -4,6 +4,7 @@ import type { InferDataFromQueryTagOption, QueryTagObject, QueryTagOption, Query
 import { TODO } from '../type-utils';
 import { QueryBuilderFrozen } from './QueryBuilderFrozen';
 import { type MiddlewareFn, createMiddlewareFunction } from './createMiddlewareFunction';
+import { PostprocessorFn } from './createMiddlewareFunction';
 import { type PreprocessorFn, createPreprocessorFunction, identityPreprocessor } from './createPreprocessorFunction';
 import { createTagMiddleware } from './createTagMiddleware';
 import { createUpdateMiddleware } from './createUpdateMiddleware';
@@ -65,8 +66,8 @@ export class QueryBuilder<
   withPreprocessor(preprocessor: PreprocessorFn<TVars, TVars>): this;
 
   /**
-   * Adds a preprocessor function to the query with a different type of input variables.
-   * The preprocessor function is called before the query function is called.
+   * Adds a pre-processor function to the query with a different type of input variables.
+   * The pre-processor function is called before the query function is called.
    */
   withPreprocessor<TVars$ = TVars>(preprocessor: PreprocessorFn<TVars$, TVars>): QueryBuilder<TVars$, TData, TError, TKey, TTags, TFlags>;
 
@@ -78,24 +79,35 @@ export class QueryBuilder<
     });
   }
 
+  /**
+   * Adds a post-processor function to the query.
+   * The post-processor function is called after the query function is successfully called.
+   * It can be used to modify the output data.
+   */
+  withPostprocessor<TData$ = TData>(
+    postprocessor: PostprocessorFn<TData, TData$>,
+  ): QueryBuilder<TVars, TData$, TError, TKey, TTags, TFlags> {
+    return this.withMiddleware(async (ctx, next) => postprocessor(await next(ctx)));
+  }
+
   /**
    * Adds a middleware function to the query.
    * The middleware function wraps the query function and
    * can be used to modify the input variables, the output data, or the error.
    */
-  withMiddleware(middleware: MiddlewareFn<TVars, TData, TError, TKey>): this;
+  withMiddleware(middleware: MiddlewareFn<TVars, TData, TError, TKey, TData>): this;
 
   /**
    * Adds a middleware function to the query with overloaded types.
    * The middleware function wraps the query function and
    * can be used to modify the input variables, the output data, or the error.
    */
   withMiddleware<TVars$ = TVars, TData$ = TData, TError$ = TError>(
-    middleware: MiddlewareFn<TVars$, TData$, TError$, TKey>,
+    middleware: MiddlewareFn<TVars$, TData$, TError$, TKey, TData>,
   ): QueryBuilder<TVars$, TData$, TError$, TKey, TTags, TFlags>;
 
   withMiddleware<TVars$ = TVars, TData$ = TData, TError$ = TError>(
-    middleware: MiddlewareFn<TVars$, TData$, TError$, TKey>,
+    middleware: MiddlewareFn<TVars$, TData$, TError$, TKey, TData>,
     config?: Partial<BuilderConfig<TVars$, TData$, TError$, TKey>>,
   ): QueryBuilder<TVars$, TData$, TError$, TKey, TTags, TFlags> {
     const newBuilder = this as unknown as QueryBuilder<TVars$, TData$, TError$, TKey, TTags, TFlags>;

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

@@ -78,6 +78,17 @@ export class QueryBuilderFrozen<
   TTags extends Record<string, unknown> = Record<string, unknown>,
   TFlags extends BuilderFlags = '',
 > {
+  get types(): {
+    vars: TVars;
+    data: TData;
+    error: TError;
+    key: TKey;
+    tagMap: TTags;
+    flags: TFlags;
+  } {
+    throw new Error('Types should not be used in runtime. They are only for type inference.');
+  }
+
   constructor(public readonly config: BuilderConfig<TVars, TData, TError, TKey>) {
     if (config.bound) bindMethods(this, methodsToBind);
     this.client = new QueryBuilderClient(this) as typeof this.client;

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

@@ -1,9 +1,9 @@
 import type { BuilderConfig } from './types';
 import type { BuilderQueryContext, BuilderQueryFn } from './types';
 
-export type MiddlewareFn<TVars, TData, TError, TKey extends unknown[]> = (
+export type MiddlewareFn<TVars, TData, TError, TKey extends unknown[], TNextData> = (
   context: MiddlewareContext<TKey>,
-  next: MiddlewareNextFn<any, any, any, any>,
+  next: MiddlewareNextFn<any, TNextData, any, TKey>,
   config: BuilderConfig<TVars, TData, TError, TKey>,
 ) => TData | Promise<TData>;
 
@@ -22,11 +22,15 @@ const createMiddlewareContext = <TKey extends unknown[]>(context: BuilderQueryCo
   };
 };
 
-export const createMiddlewareFunction = <TVars, TData, TError, TKey extends unknown[]>(
+export const createMiddlewareFunction = <TVars, TData, TError, TKey extends unknown[], TNextData>(
   originalFn: BuilderQueryFn<any, any, any, any>,
-  middleware: MiddlewareFn<TVars, TData, TError, TKey>,
+  middleware: MiddlewareFn<TVars, TData, TError, TKey, TNextData>,
   config: BuilderConfig<TVars, TData, TError, TKey>,
 ): BuilderQueryFn<TVars, TData, TError, TKey> => {
   return async (context) =>
     middleware(createMiddlewareContext<TKey>(context), async (ctx) => originalFn({ ...context, queryKey: [ctx.vars] }), config);
 };
+
+export type PostprocessorFn<TData, TModifiedData> = (data: TData) => TModifiedData;
+
+export const identityPostprocessor = <TData = unknown, TOut = TData>(data: TData): TOut => data as unknown as TOut;

packages/tanstack-query-builder/src/http/HttpQueryBuilder.ts

@@ -1,5 +1,6 @@
 import { QueryClient } from '@tanstack/react-query';
 import { QueryBuilder } from '../builder/QueryBuilder';
+import { PostprocessorFn } from '../builder/createMiddlewareFunction';
 import type { BuilderPaginationOptions } from '../builder/options';
 import type { BuilderConfig, BuilderFlags } from '../builder/types';
 import type { RequestError } from '../http/errors';
@@ -144,6 +145,10 @@ export class HttpQueryBuilder<
     ? HttpQueryBuilder<TParam, TSearch, TBody, THeader, TMeta, InferDataFromQueryTagOption<TTagOpt, TTags>, TError, TTags, TFlags, TKey>
     : this;
 
+  declare withPostprocessor: <TData$ = TData>(
+    postprocessor: PostprocessorFn<TData, TData$>,
+  ) => HttpQueryBuilder<TParam, TSearch, TBody, THeader, TMeta, TData$, TError, TTags, TFlags, TKey>;
+
   withTagTypes<TTag extends string, T = unknown>(): HttpQueryBuilder<
     TParam,
     TSearch,

website/docs/api/builder.mdx

@@ -40,6 +40,17 @@ withPreprocessor(preprocessor): this
 Adds a preprocessor function to the query.
 The preprocessor function is called before the query function is called.
 
+### withPostprocessor
+
+```ts
+withPostprocessor(postprocessor): this
+```
+
+Adds a postprocessor function to the query.
+The preprocessor function is called after the query function is called successfully.
+The postprocessor function can be used to modify the output data or the error.
+Note that this is a specific case of the middleware function and middleware functions can be used to handle more advanced use cases.
+
 ### withMiddleware
 
 ```ts