Getting TypeScript errors with invalidatesTags when referencing tags from other APIs that were added dynamically

[joeattardi]

Hi, I'm working on migrating my app to TypeScript and have run into an issue.

My app uses code splitting and is divided up into many feature modules. Each feature module has an api.ts file that calls injectEndpoints and enhanceEndpoints to add tags relevant to that module.

Sometimes, an API in one module has to invalidate a tag from another module. But because these tags are dynamically registered with enhanceEndpoints, TypeScript doesn't see them as valid tags and gives me a big ugly error.

Here is a simplified and bit of a contrived example:

users/api.ts

export const TAG_USER_LIST = 'users/list';

apiSlice.enhanceEndpoints({
  addTagTypes: [TAG_USER_LIST]
});

apiSlice.injectEndpoints({
  endpoints: build => ({
    getUserList: build.query(
      ...,
      providesTags: [TAG_USER_LIST]
  })
});

Then, in another file:

user-edit/api.ts

import { TAG_USER_LIST } from '@/modules/users';

apiSlice.injectEndpoints({
  endpoints: build => ({
    activateUser: build.mutation({
      ...,
      invalidatesTags: [TAG_USER_LIST]
    })
  })
});

I get this error on the invalidatesTags:

Type 'string' is not assignable to type 'FullTagDescription<never>'.

I think the never is because I don't define any tags on the API slice when it's created. If I do add a tag, say 'ExampleTag', to the API slice at creation time, then the error becomes:

Type '"versions-vulnerabilities/VULNERABILITY_LIST"' is not assignable to type 'TagDescription<"ExampleTag"> | null | undefined'.

Either way, TypeScript is mad at me because it doesn't see the imported tag as a valid tag value to use here.

Is there a way to make TypeScript happy here, without having to statically specify all of my tags from all of my modules (some of which may not be loaded for a given user) in the API slice definition?

Thanks!

[markerikson]

@phryneas would be able to answer better here, but I'm pretty sure this is just an inherent limitation of static typing.

A given API instance can only know about the tags defined within itself. So, if you have baseApi, api1 = baseApi.injectEndpoints(), and api2 = baseApi.injectEndpoints(), api1 knows about the tags from baseApi and itself, but has no way to know tags that are defined in api2. They're entirely separate objects with no type-level relation to each other. Static and dynamic behavior end up at odds with each other.

Given that, the options are really either do some casting here to make TS happy and accept that you're technically bypassing type safety in this small case, or define all tags at the root API level.

[joeattardi]

I figured it might be a limitation of TypeScript. I ended up holding my nose and adding a as any to the array of tags and that made TypeScript happy. That's probably my only option with the dynamically added tags.

Thank you!