feat: add remove() method for queries, removeOnDestroy option for queries

Author: js2me

.changeset/beige-states-film.md

@@ -0,0 +1,5 @@
+---
+"mobx-tanstack-query": minor
+---
+
+added `removeOnDestroy` to remove query after destroy or abortSignal aborted

.changeset/true-showers-look.md

@@ -0,0 +1,5 @@
+---
+"mobx-tanstack-query": minor
+---
+
+added `remove()` method for `Query/InfiniteQuery` to remove query

src/inifinite-query.ts

@@ -31,11 +31,13 @@ import {
   InfiniteQueryFlattenConfig,
   InfiniteQueryInvalidateParams,
   InfiniteQueryOptions,
+  InfiniteQueryRemoveParams,
   InfiniteQueryResetParams,
   InfiniteQueryStartParams,
   InfiniteQueryUpdateOptionsAllVariants,
 } from './inifinite-query.types';
 import { Query } from './query';
+import { QueryClient } from './query-client';
 import { AnyQueryClient, QueryClientHooks } from './query-client.types';
 import { QueryFeatures } from './query.types';
 
@@ -581,6 +583,10 @@ export class InfiniteQuery<
     return await Query.prototype.reset.call(this, params);
   }
 
+  remove(params?: InfiniteQueryRemoveParams) {
+    return Query.prototype.remove.call(this, params);
+  }
+
   async invalidate(options?: InfiniteQueryInvalidateParams) {
     return await Query.prototype.invalidate.call(this, options);
   }
@@ -616,17 +622,28 @@ export class InfiniteQuery<
 
     let isNeedToReset =
       this.config.resetOnDestroy || this.config.resetOnDispose;
+    let isNeedToRemove = this.config.removeOnDestroy;
+
+    if (this.queryClient instanceof QueryClient) {
+      if (isNeedToReset === undefined) {
+        isNeedToReset =
+          this.queryClient.queryFeatures.resetOnDestroy ||
+          this.queryClient.queryFeatures.resetOnDispose;
+      }
 
-    if ('queryFeatures' in this.queryClient && !isNeedToReset) {
-      isNeedToReset =
-        this.queryClient.queryFeatures.resetOnDestroy ||
-        this.queryClient.queryFeatures.resetOnDispose;
+      if (isNeedToRemove === undefined) {
+        isNeedToRemove = this.queryClient.queryFeatures.removeOnDestroy;
+      }
     }
 
     if (isNeedToReset) {
       this.reset();
     }
 
+    if (isNeedToRemove) {
+      this.remove();
+    }
+
     delete this._observerSubscription;
     this.hooks?.onInfiniteQueryDestroy?.(this);
   }

src/inifinite-query.types.ts

@@ -13,6 +13,7 @@ import { AnyQueryClient } from './query-client.types';
 import {
   QueryFeatures,
   QueryInvalidateParams,
+  QueryRemoveParams,
   QueryResetParams,
 } from './query.types';
 
@@ -34,6 +35,7 @@ export interface InfiniteQueryInvalidateParams extends QueryInvalidateParams {}
 export type MobxInfiniteQueryInvalidateParams = InfiniteQueryInvalidateParams;
 
 export interface InfiniteQueryResetParams extends QueryResetParams {}
+export interface InfiniteQueryRemoveParams extends QueryRemoveParams {}
 
 /**
  * @deprecated ⚠️ use `InfiniteQueryResetParams`. This type will be removed in next major release

src/query.ts

@@ -35,6 +35,7 @@ import {
   QueryFeatures,
   QueryInvalidateParams,
   QueryOptions,
+  QueryRemoveParams,
   QueryResetParams,
   QueryStartParams,
   QueryUpdateOptionsAllVariants,
@@ -588,6 +589,14 @@ export class Query<
     );
   }
 
+  remove(params?: QueryRemoveParams) {
+    return this.queryClient.removeQueries({
+      queryKey: this.options.queryKey,
+      exact: true,
+      ...params,
+    });
+  }
+
   async cancel(options?: CancelOptions) {
     return await this.queryClient.cancelQueries(
       {
@@ -624,17 +633,28 @@ export class Query<
 
     let isNeedToReset =
       this.config.resetOnDestroy || this.config.resetOnDispose;
+    let isNeedToRemove = this.config.removeOnDestroy;
 
-    if (this.queryClient instanceof QueryClient && !isNeedToReset) {
-      isNeedToReset =
-        this.queryClient.queryFeatures.resetOnDestroy ||
-        this.queryClient.queryFeatures.resetOnDispose;
+    if (this.queryClient instanceof QueryClient) {
+      if (isNeedToReset === undefined) {
+        isNeedToReset =
+          this.queryClient.queryFeatures.resetOnDestroy ||
+          this.queryClient.queryFeatures.resetOnDispose;
+      }
+
+      if (isNeedToRemove === undefined) {
+        isNeedToRemove = this.queryClient.queryFeatures.removeOnDestroy;
+      }
     }
 
     if (isNeedToReset) {
       this.reset();
     }
 
+    if (isNeedToRemove) {
+      this.remove();
+    }
+
     delete this._observerSubscription;
 
     this.hooks?.onQueryDestroy?.(this);

src/query.types.ts

@@ -21,6 +21,9 @@ export type MobxQueryInvalidateParams = QueryInvalidateParams;
 export interface QueryResetParams
   extends Partial<Omit<QueryFilters, 'queryKey' | 'exact'>> {}
 
+export interface QueryRemoveParams
+  extends Partial<Omit<QueryFilters, 'queryKey' | 'exact'>> {}
+
 /**
  * @deprecated ⚠️ use `QueryResetParams`. This type will be removed in next major release
  */
@@ -111,6 +114,13 @@ export interface QueryFeatures {
    */
   resetOnDestroy?: boolean;
 
+  /**
+   * Removes query when destroy or abort signal is called
+   *
+   * It uses [queryClient.removeQueries](https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientremovequeries)
+   */
+  removeOnDestroy?: boolean;
+
   /**
    * Enable query only if result is requested
    */