unify builders

Author: KurtGokhan

README.md

@@ -6,16 +6,16 @@
 
 The simplest way to start building with Tanstack Query.
 
-This library builds on top of Tanstack Query to provide out-of-the-box functionality to help you get started faster, and keep the application code structured.
+This library builds on top of Tanstack Query to provide out-of-the-box functionality to help you get started faster, and keep the application code well-structured.
 
-It uses the builder pattern, the best pattern that works with complex Typescript types.
+It uses the builder pattern, the best pattern for working with complex Typescript types.
 
 [Visit the docs →](https://gkurt.com/react-query-builder/)
 
 ## Features
 
 - REST client using fetch API
-- Automaticly created query keys and easy invalidation
+- Automatically created query keys and easy invalidation
 - Customizable with middlewares
 - Tag based invalidation
 - Declarative optimistic updates
@@ -24,17 +24,11 @@ It uses the builder pattern, the best pattern that works with complex Typescript
 ## Advantages
 
 - 💪 Strong-typed
-- 🧩 Consistently structured
 - 🚀 Features out-of-the-box
 - ⚙️ Customizable and extendable
 - 🪶 Zero dependencies
 - 🚢 SSR and Router compatible
 
-## TODO
-
-- Infinite queries
-- Single interface for mutations and queries
-
 ## Examples
 
 Following code loads a list of Posts from an API, and presents a Delete button to delete each one.
@@ -49,9 +43,15 @@ const baseMutation = new HttpMutationBuilder().withBaseUrl(baseUrl);
 
 type PostData = { id: number; title: string; body: string; userId: number };
 
-const postsQuery = baseQuery.withTags("refreshable", "posts").withPath("/posts").withData<PostData[]>();
+const postsQuery = baseQuery
+  .withTags("refreshable", "posts")
+  .withPath("/posts")
+  .withData<PostData[]>();
 
-const deletePostMutation = baseMutation.withUpdates("posts").withMethod("delete").withPath("/posts/:id");
+const deletePostMutation = baseMutation
+  .withUpdates("posts")
+  .withMethod("delete")
+  .withPath("/posts/:id");
 
 export function MyApp() {
   const posts = postsQuery.useQuery({});
@@ -70,7 +70,10 @@ export function MyApp() {
           <h2>{post.title}</h2>
           <p>{post.body}</p>
 
-          <button onClick={() => onDelete(post.id)} disabled={deletePost.isPending}>
+          <button
+            onClick={() => onDelete(post.id)}
+            disabled={deletePost.isPending}
+          >
             Delete
           </button>
         </div>

examples/vite/src/App.tsx

@@ -5,7 +5,7 @@ import './App.css';
 import { HttpQueryBuilder } from 'react-query-builder';
 import { queryClient } from './client';
 
-const baseQuery = new HttpQueryBuilder({
+const builder = new HttpQueryBuilder({
   queryClient,
   syncChannel: new BroadcastChannel('react-query-builder'),
 })
@@ -17,23 +17,21 @@ const baseQuery = new HttpQueryBuilder({
     refreshable: unknown;
   }>();
 
-const baseMutation = baseQuery.asMutationBuilder();
+const resetMutation = builder.withPath('/reset').withMethod('post').withUpdates('*');
 
-const resetMutation = baseMutation.withPath('/reset').withUpdates('*');
-
-const postsQuery = baseQuery
+const postsQuery = builder
   .withTags('refreshable', 'posts')
   .withPath('/posts')
   .withData<PostData[]>()
   .withSearch<{ page?: number }>()
   .withConfig({
     options: {
-      initialPageParam: { search: { page: 0 } },
+      getInitialPageParam: { search: { page: 0 } },
       getNextPageParam: (prev, __, lastVars) => (!prev?.length ? null : { search: { page: (lastVars?.search?.page || 0) + 1 } }),
     },
   });
 
-const postQuery = baseQuery
+const postQuery = builder
   .withTags('refreshable')
   .withPath('/posts/:id')
   .withData<PostData>()
@@ -44,13 +42,13 @@ const postQuery = baseQuery
     return { ...res, titleUppercase: res.title.toUpperCase() };
   });
 
-const commentsQuery = baseQuery
+const commentsQuery = builder
   .withTags('refreshable')
   .withPath('/comments')
   .withSearch<{ postId: number | null }>()
   .withData<CommentData[]>();
 
-const editPostMutation = baseMutation
+const editPostMutation = builder
   .withPath('/posts/:id')
   .withMethod('put')
   .withBody<Partial<PostData>>()
@@ -78,7 +76,7 @@ const editPostMutation = baseMutation
     return res;
   });
 
-const deletePostMutation = baseMutation.withMethod('delete').withPath('/posts/:id').withUpdates({
+const deletePostMutation = builder.withMethod('delete').withPath('/posts/:id').withUpdates({
   type: 'posts',
   optimistic: true,
   updater: 'delete-params-by-id',
@@ -92,7 +90,7 @@ function App() {
 
   const deleteErrors = deletePostMutation.useMutationState(undefined, { status: 'error' }, (x) => x.state.variables?.params.id);
 
-  const refresh = () => baseQuery.client.operateTags({ tags: 'refreshable', operation: 'reset' });
+  const refresh = () => builder.client.operateTags({ tags: 'refreshable', operation: 'reset' });
 
   if (postId) return <PostPage postId={postId} onBack={() => setPostId(null)} />;
 
@@ -124,8 +122,8 @@ function App() {
                 </a>
 
                 <button
-                  onClick={() => deletePostMutation.mutate({ params: { id: post.id } })}
-                  disabled={deletePostMutation.isMutating() > 0}
+                  onClick={() => deletePostMutation.client.mutate({ params: { id: post.id } })}
+                  disabled={deletePostMutation.client.isMutating() > 0}
                 >
                   Delete
                 </button>

src/builder/HttpMutationBuilder.ts

@@ -1,10 +1,8 @@
 import { RequestError } from '../http/errors';
 import { ExtractPathParams, HttpMethod } from '../http/types';
 import { WithOptional } from '../type-utils';
-import { HttpMutationBuilder } from './HttpMutationBuilder';
-import { MutationBuilder } from './MutationBuilder';
 import { QueryBuilder } from './QueryBuilder';
-import { QueryBuilderConfig } from './QueryBuilderFrozen';
+import { BuilderConfig } from './types';
 import { HttpBaseHeaders, HttpBaseParams, HttpBaseSearch, HttpBuilderVars } from './types';
 import { createHttpMergeVarsFn, createHttpQueryFn, createHttpQueryHashFn } from './utils';
 
@@ -20,7 +18,7 @@ export class HttpQueryBuilder<
   TKey extends [HttpBuilderVars] = [HttpBuilderVars<TParam, TSearch, TBody, THeader, TMeta>],
 > extends QueryBuilder<HttpBuilderVars<TParam, TSearch, TBody, THeader, TMeta>, TData, TError, TKey, TTags> {
   constructor(
-    config?: WithOptional<QueryBuilderConfig<HttpBuilderVars<TParam, TSearch, TBody, THeader, TMeta>, TData, TError, TKey>, 'queryFn'>,
+    config?: WithOptional<BuilderConfig<HttpBuilderVars<TParam, TSearch, TBody, THeader, TMeta>, TData, TError, TKey>, 'queryFn'>,
   ) {
     const mergeVars = config?.mergeVars || createHttpMergeVarsFn();
     const queryFn = config?.queryFn || createHttpQueryFn(mergeVars);
@@ -103,11 +101,4 @@ export class HttpQueryBuilder<
   withTagTypes(): this {
     return this as any;
   }
-
-  protected MutationBuilderConstructor = HttpMutationBuilder as typeof MutationBuilder;
-
-  asMutationBuilder(): HttpMutationBuilder<TParam, TSearch, TBody, THeader, TMeta, TData, TError, TTags, TKey> {
-    const { options, ...restConfig } = this.config;
-    return new this.MutationBuilderConstructor(restConfig) as any;
-  }
 }