Merge pull request #4671 from pierroberto/feat/4644-tags-invalidation-improvements

Feat/4644 tags invalidation improvements

Author: markerikson

packages/toolkit/src/query/core/buildMiddleware/index.ts

@@ -50,7 +50,7 @@ export function buildMiddleware<
 
   const actions = {
     invalidateTags: createAction<
-      Array<TagTypes | FullTagDescription<TagTypes>>
+      Array<TagTypes | FullTagDescription<TagTypes> | null | undefined>
     >(`${reducerPath}/invalidateTags`),
   }
 

packages/toolkit/src/query/core/buildSelectors.ts

@@ -9,7 +9,7 @@ import type {
   TagTypesFrom,
 } from '../endpointDefinitions'
 import { expandTagDescription } from '../endpointDefinitions'
-import { flatten } from '../utils'
+import { flatten, isNotNullish } from '../utils'
 import type {
   MutationSubState,
   QueryCacheKey,
@@ -206,15 +206,15 @@ export function buildSelectors<
 
   function selectInvalidatedBy(
     state: RootState,
-    tags: ReadonlyArray<TagDescription<string>>,
+    tags: ReadonlyArray<TagDescription<string> | null | undefined>,
   ): Array<{
     endpointName: string
     originalArgs: any
     queryCacheKey: QueryCacheKey
   }> {
     const apiState = state[reducerPath]
     const toInvalidate = new Set<QueryCacheKey>()
-    for (const tag of tags.map(expandTagDescription)) {
+    for (const tag of tags.filter(isNotNullish).map(expandTagDescription)) {
       const provided = apiState.provided[tag.type]
       if (!provided) {
         continue

packages/toolkit/src/query/core/module.ts

@@ -350,7 +350,7 @@ export interface ApiModules<
        * ```
        */
       invalidateTags: ActionCreatorWithPayload<
-        Array<TagDescription<TagTypes>>,
+        Array<TagDescription<TagTypes> | null | undefined>,
         string
       >
 
@@ -361,7 +361,7 @@ export interface ApiModules<
        */
       selectInvalidatedBy: (
         state: RootState<Definitions, string, ReducerPath>,
-        tags: ReadonlyArray<TagDescription<TagTypes>>,
+        tags: ReadonlyArray<TagDescription<TagTypes> | null | undefined>,
       ) => Array<{
         endpointName: string
         originalArgs: any

packages/toolkit/src/query/endpointDefinitions.ts

@@ -29,6 +29,7 @@ import type {
   OmitFromUnion,
   UnwrapPromise,
 } from './tsHelpers'
+import { isNotNullish } from './utils'
 
 const resultType = /* @__PURE__ */ Symbol()
 const baseQuery = /* @__PURE__ */ Symbol()
@@ -224,7 +225,7 @@ export type GetResultDescriptionFn<
   error: ErrorType | undefined,
   arg: QueryArg,
   meta: MetaType,
-) => ReadonlyArray<TagDescription<TagTypes>>
+) => ReadonlyArray<TagDescription<TagTypes> | undefined | null>
 
 export type FullTagDescription<TagType> = {
   type: TagType
@@ -242,7 +243,7 @@ export type ResultDescription<
   ErrorType,
   MetaType,
 > =
-  | ReadonlyArray<TagDescription<TagTypes>>
+  | ReadonlyArray<TagDescription<TagTypes> | undefined | null>
   | GetResultDescriptionFn<TagTypes, ResultType, QueryArg, ErrorType, MetaType>
 
 type QueryTypes<
@@ -778,6 +779,7 @@ export function calculateProvidedBy<ResultType, QueryArg, ErrorType, MetaType>(
       queryArg,
       meta as MetaType,
     )
+      .filter(isNotNullish)
       .map(expandTagDescription)
       .map(assertTagTypes)
   }

packages/toolkit/src/query/tests/buildMiddleware.test.tsx

@@ -1,6 +1,6 @@
 import { createApi } from '@reduxjs/toolkit/query'
-import { actionsReducer, setupApiStore } from '../../tests/utils/helpers'
 import { delay } from 'msw'
+import { actionsReducer, setupApiStore } from '../../tests/utils/helpers'
 
 const baseQuery = (args?: any) => ({ data: args })
 const api = createApi({
@@ -25,9 +25,15 @@ const api = createApi({
       },
       providesTags: ['Bread'],
     }),
+    invalidateFruit: build.mutation({
+      query: (fruit?: 'Banana' | 'Bread' | null) => ({ url: `invalidate/fruit/${fruit || ''}` }),
+      invalidatesTags(result, error, arg) {
+        return [arg]
+      }
+    })
   }),
 })
-const { getBanana, getBread } = api.endpoints
+const { getBanana, getBread, invalidateFruit } = api.endpoints
 
 const storeRef = setupApiStore(api, {
   ...actionsReducer,
@@ -70,3 +76,61 @@ it('invalidates the specified tags', async () => {
     getBread.matchFulfilled,
   )
 })
+
+it('invalidates tags correctly when null or undefined are provided as tags', async() =>{
+  await storeRef.store.dispatch(getBanana.initiate(1))
+  await storeRef.store.dispatch(api.util.invalidateTags([undefined, null, 'Banana']))
+
+  // Slight pause to let the middleware run and such
+  await delay(20)
+
+  const apiActions = [
+    api.internalActions.middlewareRegistered.match,
+    getBanana.matchPending,
+    getBanana.matchFulfilled,
+    api.util.invalidateTags.match,
+    getBanana.matchPending,
+    getBanana.matchFulfilled,
+  ]
+
+  expect(storeRef.store.getState().actions).toMatchSequence(...apiActions)
+})
+
+
+it.each([
+  { tags: [undefined, null, 'Bread'] as Parameters<typeof api.util.invalidateTags>['0'] },
+  { tags: [undefined, null], }, { tags: [] }]
+)('does not invalidate with tags=$tags if no query matches', async ({ tags }) => {
+  await storeRef.store.dispatch(getBanana.initiate(1))
+  await storeRef.store.dispatch(api.util.invalidateTags(tags))
+
+  // Slight pause to let the middleware run and such
+  await delay(20)
+
+  const apiActions = [
+    api.internalActions.middlewareRegistered.match,
+    getBanana.matchPending,
+    getBanana.matchFulfilled,
+    api.util.invalidateTags.match,
+  ]
+
+  expect(storeRef.store.getState().actions).toMatchSequence(...apiActions)
+})
+ 
+it.each([{ mutationArg: 'Bread' as "Bread" | null | undefined  }, { mutationArg: undefined }, { mutationArg: null }])('does not invalidate queries when a mutation with tags=[$mutationArg] runs and does not match anything', async ({ mutationArg }) => {
+  await storeRef.store.dispatch(getBanana.initiate(1))
+  await storeRef.store.dispatch(invalidateFruit.initiate(mutationArg))
+
+  // Slight pause to let the middleware run and such
+  await delay(20)
+
+  const apiActions = [
+    api.internalActions.middlewareRegistered.match,
+    getBanana.matchPending,
+    getBanana.matchFulfilled,
+    invalidateFruit.matchPending,
+    invalidateFruit.matchFulfilled,
+  ]
+
+  expect(storeRef.store.getState().actions).toMatchSequence(...apiActions)
+})

packages/toolkit/src/query/tests/createApi.test-d.ts

@@ -39,7 +39,7 @@ describe('type tests', () => {
 
     expectTypeOf(api.util.invalidateTags)
       .parameter(0)
-      .toEqualTypeOf<TagDescription<never>[]>()
+      .toEqualTypeOf<(null | undefined | TagDescription<never>)[]>()
   })
 
   describe('endpoint definition typings', () => {

packages/toolkit/src/query/tests/invalidation.test.tsx

@@ -14,10 +14,10 @@ const tagTypes = [
   'giraffe',
 ] as const
 type TagTypes = (typeof tagTypes)[number]
-type Tags = TagDescription<TagTypes>[]
-
+type ProvidedTags = TagDescription<TagTypes>[] 
+type InvalidatesTags = (ProvidedTags[number] | null | undefined)[]
 /** providesTags, invalidatesTags, shouldInvalidate */
-const caseMatrix: [Tags, Tags, boolean][] = [
+const caseMatrix: [ProvidedTags, InvalidatesTags, boolean][] = [
   // *****************************
   // basic invalidation behavior
   // *****************************
@@ -39,7 +39,11 @@ const caseMatrix: [Tags, Tags, boolean][] = [
   // type + id invalidates type + id
   [[{ type: 'apple', id: 1 }], [{ type: 'apple', id: 1 }], true],
   [[{ type: 'apple', id: 1 }], [{ type: 'apple', id: 2 }], false],
-
+  // null and undefined
+  [['apple'], [null], false],
+  [['apple'], [undefined], false],
+  [['apple'], [null, 'apple'], true],
+  [['apple'], [undefined, 'apple'], true],
   // *****************************
   // test multiple values in array
   // *****************************