feat: add remove method and deprecate clear

Author: boschni

docs/src/pages/docs/api.md

@@ -7,7 +7,6 @@ title: API Reference
 
 ```js
 const {
-  clear,
   data,
   error,
   failureCount,
@@ -20,6 +19,7 @@ const {
   isStale,
   isSuccess,
   refetch,
+  remove,
   status,
 } = useQuery(queryKey, queryFn?, {
   cacheTime,
@@ -194,7 +194,7 @@ const queryInfo = useQuery({
 - `refetch: Function({ throwOnError }) => Promise<TResult | undefined>`
   - A function to manually refetch the query.
   - If the query errors, the error will only be logged. If you want an error to be thrown, pass the `throwOnError: true` option
-- `clear: Function() => void`
+- `remove: Function() => void`
   - A function to remove the query from the cache.
 
 ## `usePaginatedQuery`

src/core/query.ts

@@ -146,7 +146,7 @@ export class Query<TResult, TError> {
     }
 
     this.gcTimeout = setTimeout(() => {
-      this.clear()
+      this.remove()
     }, this.cacheTime)
   }
 
@@ -206,7 +206,17 @@ export class Query<TResult, TError> {
     })
   }
 
+  /**
+   * @deprecated
+   */
   clear(): void {
+    Console.warn(
+      'react-query: clear() has been deprecated, please use remove() instead'
+    )
+    this.remove()
+  }
+
+  remove(): void {
     this.queryCache.removeQuery(this)
   }
 

src/core/queryObserver.ts

@@ -30,7 +30,7 @@ export class QueryObserver<TResult, TError> {
     this.initialUpdateCount = 0
 
     // Bind exposed methods
-    this.clear = this.clear.bind(this)
+    this.remove = this.remove.bind(this)
     this.refetch = this.refetch.bind(this)
     this.fetchMore = this.fetchMore.bind(this)
 
@@ -110,8 +110,15 @@ export class QueryObserver<TResult, TError> {
     return this.currentResult
   }
 
+  /**
+   * @deprecated
+   */
   clear(): void {
-    return this.currentQuery.clear()
+    this.remove()
+  }
+
+  remove(): void {
+    this.currentQuery.remove()
   }
 
   refetch(options?: RefetchOptions): Promise<TResult | undefined> {
@@ -234,7 +241,7 @@ export class QueryObserver<TResult, TError> {
     this.currentResult = {
       ...getStatusProps(status),
       canFetchMore: state.canFetchMore,
-      clear: this.clear,
+      clear: this.remove,
       data,
       error: state.error,
       failureCount: state.failureCount,
@@ -247,6 +254,7 @@ export class QueryObserver<TResult, TError> {
       isPreviousData,
       isStale: this.isStale,
       refetch: this.refetch,
+      remove: this.remove,
       updatedAt,
     }
   }

src/core/types.ts

@@ -207,6 +207,7 @@ export interface QueryResultBase<TResult, TError = unknown> {
   isStale: boolean
   isSuccess: boolean
   refetch: (options?: RefetchOptions) => Promise<TResult | undefined>
+  remove: () => void
   status: QueryStatus
   updatedAt: number
 }

src/react/tests/useInfiniteQuery.test.tsx

@@ -78,6 +78,7 @@ describe('useInfiniteQuery', () => {
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
+      remove: expect.any(Function),
       status: 'loading',
       updatedAt: expect.any(Number),
     })
@@ -107,6 +108,7 @@ describe('useInfiniteQuery', () => {
       isStale: true,
       isSuccess: true,
       refetch: expect.any(Function),
+      remove: expect.any(Function),
       status: 'success',
       updatedAt: expect.any(Number),
     })

src/react/tests/usePaginatedQuery.test.tsx

@@ -50,6 +50,7 @@ describe('usePaginatedQuery', () => {
       latestData: undefined,
       resolvedData: undefined,
       refetch: expect.any(Function),
+      remove: expect.any(Function),
       status: 'loading',
       updatedAt: expect.any(Number),
     })
@@ -75,6 +76,7 @@ describe('usePaginatedQuery', () => {
       latestData: 1,
       resolvedData: 1,
       refetch: expect.any(Function),
+      remove: expect.any(Function),
       status: 'success',
       updatedAt: expect.any(Number),
     })

src/react/tests/useQuery.test.tsx

@@ -140,6 +140,7 @@ describe('useQuery', () => {
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
+      remove: expect.any(Function),
       status: 'loading',
       updatedAt: expect.any(Number),
     })
@@ -163,6 +164,7 @@ describe('useQuery', () => {
       isStale: true,
       isSuccess: true,
       refetch: expect.any(Function),
+      remove: expect.any(Function),
       status: 'success',
       updatedAt: expect.any(Number),
     })
@@ -216,6 +218,7 @@ describe('useQuery', () => {
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
+      remove: expect.any(Function),
       status: 'loading',
       updatedAt: expect.any(Number),
     })
@@ -239,6 +242,7 @@ describe('useQuery', () => {
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
+      remove: expect.any(Function),
       status: 'loading',
       updatedAt: expect.any(Number),
     })
@@ -262,6 +266,7 @@ describe('useQuery', () => {
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
+      remove: expect.any(Function),
       status: 'error',
       updatedAt: expect.any(Number),
     })