Typescript error with providesTags

[joaopedrocoelho]

kind of related to #1510

I refactored my code because I want to add dynamic tags to the API,
so I did this :

api.ts :

const api = customCreateApi({
    reducerPath: 'API',
    baseQuery: baseQueryWithReauth,
    endpoints: () => ({}),
});

api.enhanceEndpoints({
    addTagTypes: [
        'auth/passwordless',
        'auth/verify',
        'auth/renew',
    ],
});

export { api };

but now in the individual endpoints files I'm getting a typescript error with provideTags :

const AuthApi = api.injectEndpoints({
    endpoints: builder => ({
        PasswordlessGet: builder.query<
            PasswordlessSuccessResponse,
            PasswordlessRequestBody
        >({
            query: body => {
                console.log('running passwordless get');
                return {
                    url: 'auth/passwordless',
                    method: 'POST',
                    body: body,
                };
            },
            providesTags: ['auth/passwordless'],
        }),
   })
})

I will get this error in provideTags : Type 'string' is not assignable to type 'FullTagDescription<never>'.

What can I do to fix this?
I'm using react-redux@9.1.0 and typescript@5.4.5

[markerikson]

You may need to add as const to that array so TS knows it's the specific string.

[eskimojo-alt]

You need to export the result of .enhanceEndpoints and use that - it can't change the type of the existing API, it just returns a new version typed to know about what's been added.

edit: oops, wrong account

[joaopedrocoelho]

@eskimojo-alt So how I'm going to add new tags and make sure every endpoints use the same api ? Like how can I get this to work :

getPosts: builder.query<
            CmsData,
            {
                slug: string;
            }
        >({
            query: body => {
                return {
                    url: `api/posts/$?filters[holdingSlug][$eq]=${body.slug}`,
                    method: 'GET',
                };
            },
            transformResponse: (response: CmsPostsResponseBody) => {
                return response.data[0];
            },
            providesTags: result => {
                return result ? [...result.attributes.holdingSlug] : [];
            },
        }),

this give me a TS error on providesTags :

Type '(result: CmsPostData | undefined) => string[]' is not assignable to type 'ResultDescription<never, CmsPostData, { slug: string; }, FetchBaseQueryError, {} | undefined> | undefined'.
Type '(result: CmsPostData| undefined) => string[]' is not assignable to type 'GetResultDescriptionFn<never, CmsPostData, { slug: string; }, FetchBaseQueryError, {} | undefined>'.
  Type 'string[]' is not assignable to type 'readonly FullTagDescription<never>[]'.
    Type 'string' is not assignable to type 'FullTagDescription<never>'.

[EskiMojo14]

the type for tags needs to be predictable, and known by TS. If you need something dynamic on top of that, you should use the id property they can have. https://redux-toolkit.js.org/rtk-query/usage/automated-refetching#providing-tags