make tags unavailable when client isn't provided

Author: KurtGokhan

README.md

@@ -35,11 +35,15 @@ Following code loads a list of Posts from an API, and presents a Delete button t
 When a Post is deleted, the list query is automatically invalidated and refetched to show the up-to-date data.
 
 ```tsx
+import { QueryClient } from "@tanstack/react-query";
 import { HttpQueryBuilder } from "react-query-builder";
 
 type PostData = { id: number; title: string; body: string; userId: number };
 
+const client = new QueryClient();
+
 const builder = new HttpQueryBuilder()
+  .withClient(client)
   .withBaseUrl("https://jsonplaceholder.typicode.com")
   .withTagTypes<{
     posts: PostData[];
@@ -57,7 +61,9 @@ const deletePostMutation = builder
   .withPath("/posts/:id");
 
 export function MyApp() {
-  const [refresh] = builder.tags.useOperation({ tags: "refreshable" });
+  const [refresh, { isPending: isRefreshing }] = builder.tags.useOperation({
+    tags: "refreshable",
+  });
   const posts = postsQuery.useQuery({});
   const deletePost = deletePostMutation.useMutation();
 
@@ -67,7 +73,9 @@ export function MyApp() {
 
   return (
     <>
-      <button onClick={() => refresh()}>Refresh all posts</button>
+      <button onClick={() => refresh()} disabled={isRefreshing}>
+        Refresh all posts
+      </button>
 
       {posts.data.map((post) => (
         <div key={post.id}>

examples/vite/src/SimpleExample.tsx

@@ -1,8 +1,11 @@
+import { QueryClient } from '@tanstack/react-query';
 import { HttpQueryBuilder } from 'react-query-builder';
 
 type PostData = { id: number; title: string; body: string; userId: number };
 
-const builder = new HttpQueryBuilder().withBaseUrl('https://jsonplaceholder.typicode.com').withTagTypes<{
+const client = new QueryClient();
+
+const builder = new HttpQueryBuilder().withClient(client).withBaseUrl('https://jsonplaceholder.typicode.com').withTagTypes<{
   posts: PostData[];
   refreshable: unknown;
 }>();
@@ -12,7 +15,7 @@ const postsQuery = builder.withTags('refreshable', 'posts').withPath('/posts').w
 const deletePostMutation = builder.withUpdates('posts').withMethod('delete').withPath('/posts/:id');
 
 export function MyApp() {
-  const [refresh] = builder.tags.useOperation({ tags: 'refreshable' });
+  const [refresh, { isPending: isRefreshing }] = builder.tags.useOperation({ tags: 'refreshable' });
   const posts = postsQuery.useQuery({});
   const deletePost = deletePostMutation.useMutation();
 
@@ -22,7 +25,9 @@ export function MyApp() {
 
   return (
     <>
-      <button onClick={() => refresh()}>Refresh all posts</button>
+      <button onClick={() => refresh()} disabled={isRefreshing}>
+        Refresh all posts
+      </button>
 
       {posts.data.map((post) => (
         <div key={post.id}>

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

@@ -318,7 +318,7 @@ export class QueryBuilderFrozen<
   }
 
   private _tags?: QueryBuilderTagsManager<TVars, TData, TError, TKey, TTags>;
-  get tags() {
-    return (this._tags ??= new QueryBuilderTagsManager(this));
+  get tags(): HasClient<TFlags, QueryBuilderTagsManager<TVars, TData, TError, TKey, TTags>> {
+    return (this._tags ??= new QueryBuilderTagsManager(this)) as any;
   }
 }

packages/react-query-builder/src/builder/QueryBuilderTagsManager.ts

@@ -6,7 +6,7 @@ import type { WithOptional } from '../type-utils';
 import type { QueryBuilderFrozen } from './QueryBuilderFrozen';
 
 export class QueryBuilderTagsManager<TVars, TData, TError, TKey extends unknown[], TTags extends Record<string, unknown>> {
-  constructor(private builder: QueryBuilderFrozen<TVars, TData, TError, TKey, TTags>) {}
+  constructor(private builder: QueryBuilderFrozen<TVars, TData, TError, TKey, TTags, any>) {}
 
   /**
    * This hook returns a function that can be used to operate on queries based on tags.