add middlewares for queries

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, useOperateOnTags } from 'react-query-builder';
+import { HttpQueryBuilder, MiddlewareContext, useOperateOnTags } from 'react-query-builder';
 import { queryClient } from './client';
 
 const baseQuery = new HttpQueryBuilder({ queryClient }).withBaseUrl(baseUrl);
@@ -22,6 +22,14 @@ const postQuery = baseQuery
   .withData<PostData>()
   .withConfig({
     tags: (ctx) => [{ type: 'posts' as any, id: ctx.vars.params.id }],
+  })
+  .withMiddleware(async (ctx, next) => {
+    const res = await next(ctx);
+    return { ...res, titleUppercase: res.title.toUpperCase() };
+  })
+  .withMiddleware((ctx: MiddlewareContext<{ id: number }>, next) => {
+    const id = ctx.vars.id;
+    return next({ ...ctx, vars: { ...ctx.vars, params: { id } } });
   });
 
 const commentsQuery = baseQuery
@@ -96,7 +104,7 @@ function App() {
                   <h2
                     onClick={() => setPostId(post.id)}
                     onMouseOver={() => {
-                      postQuery.client.prefetch({ params: { id: post.id } });
+                      postQuery.client.prefetch({ id: post.id });
                       commentsQuery.client.prefetch({ search: { postId: post.id } });
                     }}
                   >
@@ -121,9 +129,8 @@ function App() {
 }
 
 function PostPage({ postId, onBack }: { postId: number; onBack: () => void }) {
-  const post = postQuery.useQuery({ params: { id: postId } });
+  const post = postQuery.useQuery({ id: postId });
   const comments = commentsQuery.useQuery({ search: { postId: postId } });
-
   const [showEdit, setShowEdit] = useState(false);
   const editPost = editPostMutation.useMutation();
 
@@ -140,7 +147,7 @@ function PostPage({ postId, onBack }: { postId: number; onBack: () => void }) {
             post.error.message
           ) : (
             <div>
-              <h2>{post.data?.title}</h2>
+              <h2>{post.data?.titleUppercase}</h2>
               <p>{post.data?.body}</p>
               <button onClick={onBack}>Back</button>
               <button onClick={() => setShowEdit(true)} disabled={editPost.isPending}>

src/builder/HttpQueryBuilder.ts

@@ -3,11 +3,13 @@ import { WithOptional } from '../types/utils';
 import { HttpMutationBuilder } from './HttpMutationBuilder';
 import { MutationBuilder } from './MutationBuilder';
 import { QueryBuilder, QueryBuilderConfig } from './QueryBuilder';
+import { MiddlewareFn } from './middlewares';
 import {
   HttpBaseHeaders,
   HttpBaseParams,
   HttpBaseSearch,
   HttpBuilderTypeTemplate,
+  SetAllTypes,
   SetDataType,
   SetErrorType,
 } from './types';
@@ -66,5 +68,8 @@ export class HttpQueryBuilder<T extends HttpBuilderTypeTemplate = HttpBuilderTyp
     reset?: TReset,
   ) => HttpQueryBuilder<AppendVarsType<T, Partial<TVars>, TReset>>;
   declare asMutationBuilder: () => HttpMutationBuilder<T>;
+  declare withMiddleware: <TVars = T['vars'], TData = T['data'], TError = T['error']>(
+    middleware: MiddlewareFn<TVars, TData, TError, T>,
+  ) => HttpQueryBuilder<SetAllTypes<T, TData, TError, TVars, true>>;
   protected override MutationBuilderConstructor: typeof MutationBuilder = HttpMutationBuilder as typeof MutationBuilder;
 }

src/builder/QueryBuilder.ts

@@ -20,7 +20,15 @@ import { mergeTagOptions } from '../tags/mergeTagOptions';
 import { QueryTagOption } from '../tags/types';
 import { FunctionType } from '../types/utils';
 import { MutationBuilder } from './MutationBuilder';
-import { BuilderMergeVarsFn, BuilderQueriesResult, BuilderQueryFn, SetDataType, SetErrorType } from './types';
+import { MiddlewareFn, applyMiddleware } from './middlewares';
+import {
+  BuilderMergeVarsFn,
+  BuilderQueriesResult,
+  BuilderQueryFn,
+  SetAllTypes,
+  SetDataType,
+  SetErrorType,
+} from './types';
 import { AppendVarsType, BuilderTypeTemplate } from './types';
 import { mergeQueryOptions, mergeVars } from './utils';
 
@@ -207,6 +215,14 @@ export class QueryBuilder<T extends BuilderTypeTemplate = BuilderTypeTemplate> e
     return new ctor<T>(newConfig) as this;
   }
 
+  withMiddleware<TVars = T['vars'], TData = T['data'], TError = T['error']>(
+    middleware: MiddlewareFn<TVars, TData, TError, T>,
+  ): QueryBuilder<SetAllTypes<T, TData, TError, TVars, true>> {
+    const newBuilder = this as unknown as QueryBuilder<SetAllTypes<T, TData, TError, TVars, true>>;
+
+    return newBuilder.withConfig({ queryFn: applyMiddleware(this.config.queryFn, middleware) });
+  }
+
   freeze(): QueryBuilderFrozen<T> {
     return this;
   }

src/builder/middlewares.ts

@@ -0,0 +1,39 @@
+import { QueryFunction, QueryFunctionContext } from '@tanstack/react-query';
+import { BuilderQueryFn, BuilderTypeTemplate } from './types';
+
+export type MiddlewareFn<TVars, TData, TError, TOriginalTemplate extends BuilderTypeTemplate> = (
+  context: MiddlewareContext<TVars>,
+  next: MiddlewareNextFn<TOriginalTemplate>,
+  throwError: (error: TError) => never,
+) => TData | Promise<TData>;
+
+export type MiddlewareContext<TVars> = QueryFunctionContext<[TVars]> & {
+  vars: TVars;
+};
+
+export type MiddlewareNextFn<T extends BuilderTypeTemplate> = (
+  context: Omit<MiddlewareContext<T['vars']>, 'queryKey'>,
+) => Promise<T['data']>;
+
+export const createMiddlewareContext = <TVars>(context: QueryFunctionContext<[TVars]>): MiddlewareContext<TVars> => {
+  return {
+    ...context,
+    vars: context.queryKey[0],
+  };
+};
+
+const throwError = (error: any): never => {
+  throw error;
+};
+
+export const applyMiddleware = <TVars, TData, TError, TOriginalTemplate extends BuilderTypeTemplate>(
+  originalFn: BuilderQueryFn<TOriginalTemplate>,
+  middleware: MiddlewareFn<TVars, TData, TError, TOriginalTemplate>,
+): QueryFunction<TData, [TVars]> => {
+  return async (context) =>
+    middleware(
+      createMiddlewareContext<TVars>(context),
+      async (ctx) => originalFn({ ...context, queryKey: [ctx.vars] }),
+      throwError,
+    );
+};

src/index.ts

@@ -2,6 +2,7 @@ export * from './builder/QueryBuilder';
 export * from './builder/HttpQueryBuilder';
 export * from './builder/MutationBuilder';
 export * from './builder/HttpMutationBuilder';
+export type { MiddlewareFn, MiddlewareContext, MiddlewareNextFn } from './builder/middlewares';
 export * from './http/request';
 export * from './tags/cache';
 export * from './tags/useOperateOnTags';