From 9cf583326a04b12483112266fbdfac3d100745c5 Mon Sep 17 00:00:00 2001 From: Jackson Date: Fri, 16 Feb 2024 08:41:42 +1100 Subject: [PATCH 1/6] removeQueryData function added and typed --- .../toolkit/src/query/core/buildThunks.ts | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/toolkit/src/query/core/buildThunks.ts b/packages/toolkit/src/query/core/buildThunks.ts index 40328f014f..f89e2b6bca 100644 --- a/packages/toolkit/src/query/core/buildThunks.ts +++ b/packages/toolkit/src/query/core/buildThunks.ts @@ -198,6 +198,14 @@ export type UpsertQueryDataThunk< UnknownAction > +export type RemoveQueryDataThunk< + Definitions extends EndpointDefinitions, + PartialState, +> = >( + endpointName: EndpointName, + args: QueryArgFrom, +) => ThunkAction + /** * An object returned from dispatching a `api.util.updateQueryData` call. */ @@ -355,6 +363,22 @@ export function buildThunks< ) } + const removeQueryData: RemoveQueryDataThunk = + (endpointName, args) => (dispatch) => { + const endpointDefinition = endpointDefinitions[endpointName] + + const queryCacheKey = serializeQueryArgs({ + queryArgs: args, + endpointDefinition, + endpointName, + }) + + + return dispatch(api.internalActions.removeQueryResult({ + queryCacheKey + })) + } + const executeEndpoint: AsyncThunkPayloadCreator< ThunkResult, QueryThunkArg | MutationThunkArg, From d36883434c790f32154bba65dd7ef776471e189a Mon Sep 17 00:00:00 2001 From: Jackson Date: Fri, 16 Feb 2024 08:43:59 +1100 Subject: [PATCH 2/6] removeQueryData attached to api.util --- packages/toolkit/src/query/core/buildThunks.ts | 1 + packages/toolkit/src/query/core/module.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/toolkit/src/query/core/buildThunks.ts b/packages/toolkit/src/query/core/buildThunks.ts index f89e2b6bca..486be682db 100644 --- a/packages/toolkit/src/query/core/buildThunks.ts +++ b/packages/toolkit/src/query/core/buildThunks.ts @@ -694,6 +694,7 @@ In the case of an unhandled error, no tags will be "provided" or "invalidated".` updateQueryData, upsertQueryData, patchQueryData, + removeQueryData, buildMatchThunkActions, } } diff --git a/packages/toolkit/src/query/core/module.ts b/packages/toolkit/src/query/core/module.ts index c237c7b298..6d28ce3df8 100644 --- a/packages/toolkit/src/query/core/module.ts +++ b/packages/toolkit/src/query/core/module.ts @@ -502,6 +502,7 @@ export const coreModule = ({ patchQueryData, updateQueryData, upsertQueryData, + removeQueryData, prefetch, buildMatchThunkActions, } = buildThunks({ @@ -533,6 +534,7 @@ export const coreModule = ({ patchQueryData, updateQueryData, upsertQueryData, + removeQueryData, prefetch, resetApiState: sliceActions.resetApiState, }) From 9e8974b4e491a0fba29b59881fca0f3e0e4fae10 Mon Sep 17 00:00:00 2001 From: Jackson Date: Fri, 16 Feb 2024 09:00:05 +1100 Subject: [PATCH 3/6] Added removeQueryData to CoreModule definition --- packages/toolkit/src/query/core/module.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/toolkit/src/query/core/module.ts b/packages/toolkit/src/query/core/module.ts index 6d28ce3df8..cb0ecb645e 100644 --- a/packages/toolkit/src/query/core/module.ts +++ b/packages/toolkit/src/query/core/module.ts @@ -50,6 +50,7 @@ import type { ReferenceQueryLifecycle } from './buildMiddleware/queryLifecycle' import type { ReferenceCacheCollection } from './buildMiddleware/cacheCollection' import { enablePatches } from 'immer' import { createSelector as _createSelector } from './rtkImports' +import { RemoveQueryDataThunk } from '@internal/query/core/buildThunks' /** * `ifOlderThan` - (default: `false` | `number`) - _number is value in seconds_ @@ -303,6 +304,22 @@ declare module '../apiTypes' { RootState > + /** + * A Redux thunk that removes a specific query result from the cache. This immediately updates the Redux state with those changes. + * + * The thunk accepts two arguments: the name of the endpoint we are updating (such as `'getPost'`) and the appropriate query arg values to construct the desired cache key. + * + * @example + * + * ```ts + * dispatch(api.util.removeQueryData('getPost', { id: 1 })) + * ``` + */ + removeQueryData: RemoveQueryDataThunk< + Definitions, + RootState + > + /** * A Redux action creator that can be dispatched to manually reset the api state completely. This will immediately remove all existing cache entries, and all queries will be considered 'uninitialized'. * From dbf05749dcaa25319b47ac7fb601a9fe8939fc65 Mon Sep 17 00:00:00 2001 From: Jackson Date: Fri, 16 Feb 2024 09:03:57 +1100 Subject: [PATCH 4/6] fixed import of RemoveQueryDataThunk type --- packages/toolkit/src/query/core/module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/toolkit/src/query/core/module.ts b/packages/toolkit/src/query/core/module.ts index cb0ecb645e..fc6ace4123 100644 --- a/packages/toolkit/src/query/core/module.ts +++ b/packages/toolkit/src/query/core/module.ts @@ -5,6 +5,7 @@ import type { PatchQueryDataThunk, UpdateQueryDataThunk, UpsertQueryDataThunk, + RemoveQueryDataThunk, } from './buildThunks' import { buildThunks } from './buildThunks' import type { @@ -50,7 +51,6 @@ import type { ReferenceQueryLifecycle } from './buildMiddleware/queryLifecycle' import type { ReferenceCacheCollection } from './buildMiddleware/cacheCollection' import { enablePatches } from 'immer' import { createSelector as _createSelector } from './rtkImports' -import { RemoveQueryDataThunk } from '@internal/query/core/buildThunks' /** * `ifOlderThan` - (default: `false` | `number`) - _number is value in seconds_ From e805dc9700ee9f624986cfbc2f0192987ceb0f37 Mon Sep 17 00:00:00 2001 From: Jackson Date: Fri, 16 Feb 2024 09:57:13 +1100 Subject: [PATCH 5/6] added test suite for removeQueryData --- .../src/query/tests/cacheCollection.test.ts | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/toolkit/src/query/tests/cacheCollection.test.ts b/packages/toolkit/src/query/tests/cacheCollection.test.ts index 936ae82044..cd8308ba18 100644 --- a/packages/toolkit/src/query/tests/cacheCollection.test.ts +++ b/packages/toolkit/src/query/tests/cacheCollection.test.ts @@ -156,6 +156,43 @@ describe(`query: await cleanup, keepUnusedDataFor set`, () => { }) }) +describe('removeCacheData', () => { + const { store, api } = storeForApi( + createApi({ + baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }), + endpoints: (build) => ({ + query: build.query({ + query: () => '/success', + }), + }), + }), + ) + + test('removeQueryData no impact if queryCacheKey different', async () => { + const promise = store.dispatch(api.endpoints.query.initiate('arg')) + await promise + const initialResponse = api.endpoints.query.select('arg')(store.getState()) + expect(initialResponse.data).toBeDefined() + + store.dispatch(api.util?.removeQueryData('query', 'argThatIsDifferent')) + + const removedResult = api.endpoints.query.select('arg')(store.getState()) + expect(removedResult.data).toBeDefined() + }) + + test('removeQueryData removes data of matching queryCacheKey', async () => { + const promise = store.dispatch(api.endpoints.query.initiate('arg')) + await promise + const initialResponse = api.endpoints.query.select('arg')(store.getState()) + expect(initialResponse.data).toBeDefined() + + store.dispatch(api.util?.removeQueryData('query', 'arg')) + + const removedResult = api.endpoints.query.select('arg')(store.getState()) + expect(removedResult.data).toBeUndefined() + }) +}) + function storeForApi< A extends { reducerPath: 'api' From 7d6aacd2ca8e8244946f94d21965ba4b73f3d927 Mon Sep 17 00:00:00 2001 From: Jackson Date: Fri, 16 Feb 2024 10:07:11 +1100 Subject: [PATCH 6/6] added docs entry for removeQueryData --- .../api/created-api/api-slice-utils.mdx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/docs/rtk-query/api/created-api/api-slice-utils.mdx b/docs/rtk-query/api/created-api/api-slice-utils.mdx index 5ce2f72e07..c218e8b207 100644 --- a/docs/rtk-query/api/created-api/api-slice-utils.mdx +++ b/docs/rtk-query/api/created-api/api-slice-utils.mdx @@ -197,6 +197,42 @@ dispatch( patchCollection.undo() ``` +### `removeQueryData` + +#### Signature + +```ts no-transpile +const removeQueryData = ( + endpointName: string, + args: any +) => ThunkAction; +``` + +- **Parameters** + - `endpointName`: a string matching an existing endpoint name + - `args`: a cache key, used to determine which cached dataset needs to be updated + +#### Description + +A Redux thunk that removes a specific query result from the cache. This immediately updates the Redux state with those changes. + +The thunk accepts two arguments: the name of the endpoint we are updating (such as `'getPost'`) and the appropriate query arg values to construct the desired cache key. + +#### Example + +```ts no-transpile +const patchCollection = dispatch( + api.endpoints.getPosts.initiate(undefined), + +// when cache data should be removed +dispatch( + api.util.removeQueryData( + 'getPosts', + undefined, + ), +) +``` + ### `prefetch` #### Signature