unify query fn

Author: KurtGokhan

README.md

@@ -32,7 +32,6 @@ It uses the builder pattern, the best pattern that works with complex Typescript
 ## TODO
 
 - Strong typed customizable tags
-- QueryClient API on builders
 - Middlewares on builder
 - Context on builder
 

src/builder/HttpMutationBuilder.ts

@@ -1,25 +1,17 @@
-import { httpRequest } from '../http/request';
 import { ExtractPathParams } from '../http/types';
 import { Prettify, WithOptional } from '../types/utils';
 import { MutationBuilder, MutationBuilderConfig } from './MutationBuilder';
 import { HttpBaseHeaders, HttpBaseParams, HttpBaseSearch, HttpBuilderTypeTemplate } from './types';
 import { PrettifyWithVars } from './types';
-import { mergeHttpVars } from './utils';
+import { createHttpQueryFn, mergeHttpVars } from './utils';
 
 export class HttpMutationBuilder<
   T extends HttpBuilderTypeTemplate = HttpBuilderTypeTemplate,
 > extends MutationBuilder<T> {
-  constructor(config?: WithOptional<MutationBuilderConfig<T>, 'mutationFn'>) {
-    super({
-      mergeVars: mergeHttpVars,
-      mutationFn: async (vars) => {
-        const search = { ...vars?.search! };
-        const params = { ...vars?.params! } as any;
-
-        return httpRequest<T['data']>({ ...(vars as any), vars, search, params });
-      },
-      ...config,
-    });
+  constructor(config?: WithOptional<MutationBuilderConfig<T>, 'queryFn'>) {
+    const mergeVars = config?.mergeVars || mergeHttpVars;
+    const queryFn = config?.queryFn || createHttpQueryFn<T>(mergeVars);
+    super({ mergeVars, queryFn, ...config });
   }
 
   withBody<TBody>(body?: TBody): HttpMutationBuilder<PrettifyWithVars<T, { body: TBody }>> {

src/builder/HttpQueryBuilder.ts

@@ -1,24 +1,16 @@
-import { httpRequest } from '../http/request';
 import { ExtractPathParams } from '../http/types';
 import { Prettify, WithOptional } from '../types/utils';
+import { HttpMutationBuilder } from './HttpMutationBuilder';
 import { QueryBuilder, QueryBuilderConfig } from './QueryBuilder';
 import { HttpBaseHeaders, HttpBaseParams, HttpBaseSearch, HttpBuilderTypeTemplate } from './types';
 import { PrettifyWithVars } from './types';
-import { mergeHttpVars } from './utils';
+import { createHttpQueryFn, mergeHttpVars } from './utils';
 
 export class HttpQueryBuilder<T extends HttpBuilderTypeTemplate = HttpBuilderTypeTemplate> extends QueryBuilder<T> {
   constructor(config?: WithOptional<QueryBuilderConfig<T>, 'queryFn'>) {
-    super({
-      mergeVars: mergeHttpVars,
-      queryFn: async ({ queryKey, signal, meta, pageParam }) => {
-        const [vars] = queryKey || [''];
-        const search = { ...vars?.search!, ...pageParam! };
-        const params = { ...vars?.params! } as any;
-
-        return httpRequest<T['data']>({ ...(vars as any), meta, vars, search, params, signal });
-      },
-      ...config,
-    });
+    const mergeVars = config?.mergeVars || mergeHttpVars;
+    const queryFn = config?.queryFn || createHttpQueryFn<T>(mergeVars);
+    super({ mergeVars, queryFn, ...config });
   }
 
   withBody<TBody>(body?: TBody): HttpQueryBuilder<PrettifyWithVars<T, { body: TBody }>> {
@@ -62,4 +54,5 @@ export class HttpQueryBuilder<T extends HttpBuilderTypeTemplate = HttpBuilderTyp
   declare withData: <TData>() => HttpQueryBuilder<Prettify<T & { data: TData }>>;
   declare withError: <TError>() => HttpQueryBuilder<Prettify<T & { error: TError }>>;
   declare withVars: <TVars = T['vars']>(vars?: TVars) => HttpQueryBuilder<PrettifyWithVars<T, Partial<TVars>>>;
+  declare asMutationBuilder: () => HttpMutationBuilder<T>;
 }

src/builder/MutationBuilder.ts

@@ -1,6 +1,5 @@
 import {
   MutationFilters,
-  MutationFunction,
   MutationKey,
   QueryClient,
   UseMutationOptions,
@@ -10,7 +9,7 @@ import {
 import { mergeTagOptions } from '../tags/mergeTagOptions';
 import { QueryInvalidatesMetadata } from '../tags/types';
 import { Prettify } from '../types/utils';
-import { BuilderMergeVarsFn } from './types';
+import { BuilderMergeVarsFn, BuilderQueryFn } from './types';
 import { BuilderTypeTemplate, PrettifyWithVars } from './types';
 import { mergeMutationOptions, mergeVars } from './utils';
 
@@ -53,7 +52,12 @@ export class MutationBuilderFrozen<T extends BuilderTypeTemplate> {
   ) => UseMutationOptions<T['data'], T['error'], T['vars']> = (opts) => {
     return mergeMutationOptions([
       {
-        mutationFn: (vars) => this.config.mutationFn(this.mergeVars([this.config.vars, vars])),
+        mutationFn: async (vars) => {
+          return this.config.queryFn({
+            queryKey: [this.mergeVars([this.config.vars, vars])],
+            meta: opts?.meta as any,
+          });
+        },
         meta: {
           invalidates: this.config.invalidates,
           updates: this.config.updates,
@@ -127,7 +131,7 @@ export type MutationBuilderConfig<T extends BuilderTypeTemplate> = QueryInvalida
   T['data'],
   T['error']
 > & {
-  mutationFn: MutationFunction<T['data'], T['vars']>;
+  queryFn: BuilderQueryFn<T['data'], T['vars']>;
 
   vars?: Partial<T['vars']>;
   mergeVars?: BuilderMergeVarsFn<T['vars']>;

src/builder/QueryBuilder.ts

@@ -4,7 +4,6 @@ import {
   InvalidateOptions,
   QueryClient,
   QueryFilters,
-  QueryFunction,
   RefetchOptions,
   ResetOptions,
   SetDataOptions,
@@ -19,7 +18,8 @@ import {
 import { mergeTagOptions } from '../tags/mergeTagOptions';
 import { QueryTagOption } from '../tags/types';
 import { FunctionType, Prettify } from '../types/utils';
-import { BuilderMergeVarsFn, BuilderQueriesResult } from './types';
+import { MutationBuilder } from './MutationBuilder';
+import { BuilderMergeVarsFn, BuilderQueriesResult, BuilderQueryFn } from './types';
 import { BuilderTypeTemplate, PrettifyWithVars } from './types';
 import { mergeQueryOptions, mergeVars } from './utils';
 
@@ -200,12 +200,21 @@ export class QueryBuilder<T extends BuilderTypeTemplate = BuilderTypeTemplate> e
   freeze(): QueryBuilderFrozen<T> {
     return this;
   }
+
+  asMutationBuilder(): MutationBuilder<T> {
+    return new MutationBuilder({
+      queryFn: this.config.queryFn,
+      queryClient: this.config.queryClient,
+      mergeVars: this.config.mergeVars,
+      vars: this.config.vars,
+    });
+  }
 }
 
 type Updater<T> = T | undefined | ((oldData: T | undefined) => T | undefined);
 
 export type QueryBuilderConfig<T extends BuilderTypeTemplate> = {
-  queryFn: QueryFunction<T['data'], [T['vars']]>;
+  queryFn: BuilderQueryFn<T['data'], T['vars']>;
   vars?: Partial<T['vars']>;
   mergeVars?: BuilderMergeVarsFn<T['vars']>;
 

src/builder/types.ts

@@ -1,4 +1,4 @@
-import { UseQueryResult } from '@tanstack/react-query';
+import { QueryFunctionContext, UseQueryResult } from '@tanstack/react-query';
 import { RequestError } from '../http/errors';
 import { HttpRequestOptions } from '../http/types';
 import { Prettify } from '../types/utils';
@@ -39,3 +39,5 @@ type QueriesResultMapType<T extends BuilderTypeTemplate> = Record<PropertyKey, Q
 export type BuilderQueriesResult<T extends BuilderTypeTemplate> = QueriesResultItemType<T>[] & {
   queryMap: QueriesResultMapType<T>;
 };
+
+export type BuilderQueryFn<TData, TVars> = (context: Partial<QueryFunctionContext<[TVars]>>) => TData | Promise<TData>;

src/builder/utils.ts

@@ -1,8 +1,9 @@
 import type { DefaultError, QueryKey, UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
+import { httpRequest } from '../http/request';
 import { mergeQueryEnabled } from '../tags/mergeQueryEnabled';
 import { mergeTagOptions } from '../tags/mergeTagOptions';
 import { FunctionType } from '../types/utils';
-import { BuilderMergeVarsFn, HttpBuilderTypeTemplate } from './types';
+import { BuilderMergeVarsFn, BuilderQueryFn, HttpBuilderTypeTemplate } from './types';
 
 export function mergeQueryOptions<
   TQueryFnData = unknown,
@@ -79,3 +80,13 @@ export const mergeHttpVars: BuilderMergeVarsFn<HttpBuilderTypeTemplate['vars']>
     },
   };
 };
+
+export function createHttpQueryFn<T extends HttpBuilderTypeTemplate>(
+  mergeVarsFn: BuilderMergeVarsFn<T['vars']>,
+): BuilderQueryFn<T['data'], T['vars']> {
+  return async ({ queryKey, signal, meta, pageParam }: any) => {
+    const [vars] = queryKey || [];
+    const mergedVars = mergeVarsFn(vars, pageParam);
+    return httpRequest<T['data']>({ ...(mergedVars as any), meta, signal });
+  };
+}

src/http/request.ts

@@ -63,7 +63,6 @@ export async function httpRequest<TData = unknown>(options: HttpRequestOptions)
     params,
     method = 'get',
     search,
-    token,
     headers,
     credentials,
     timeout,
@@ -84,10 +83,7 @@ export async function httpRequest<TData = unknown>(options: HttpRequestOptions)
   const hasBody = method !== 'get' && body != null;
   const bodySerialized = !hasBody ? undefined : prepareBody(body);
 
-  const resolvedHeaders = new Headers({
-    ...(!!token && { Authorization: `Bearer ${token}` }),
-    ...headers,
-  });
+  const resolvedHeaders = new Headers(headers as HeadersInit);
 
   const resolvedCredentials: RequestInit['credentials'] = resolveCredentials(credentials);
 

src/http/types.ts

@@ -49,11 +49,6 @@ export type HttpRequestOptions<
    */
   baseUrl?: string;
 
-  /**
-   * JWT token that will be added to the `Authorization` header.
-   */
-  token?: string;
-
   /**
    * The request will be aborted after the specified number of milliseconds.
    */

tests/MutationBuilder.test-d.ts

@@ -5,7 +5,7 @@ describe('QueryBuilder', () => {
   type TVar = { readonly sym: unique symbol };
   type TErr = { readonly sym: unique symbol };
 
-  const mt = new MutationBuilder({ mutationFn: async () => 0 }).withData<TData>().withVars<TVar>().withError<TErr>();
+  const mt = new MutationBuilder({ queryFn: async () => 0 }).withData<TData>().withVars<TVar>().withError<TErr>();
 
   describe('useQuery', () => {
     const query = mt.useMutation();