How to fix types of the root API slice .endpoints field, when endpoints are injected lazily

[maksnester]

By injected lazily I mean that I have one root API slice like:

export const rootApiSlice = createApi({
  baseQuery: getBaseQuery(),
  endpoints: () => ({}),
  tagTypes,
});

and then all the other slices are added into it like this:

export const lazyApiSlice = rootApiSlice.injectEndpoints({
  endpoints: (build) => ({
    mutateSomething: build.mutation(/* etc */)

This causes one problem when I need to access endpoint names, e.g. to invalidate tags or initiate request so currently I have to live with the code like this:

build.mutation({
    query: ({ id }) => ({
      url: `/some/${id}`,
      method: 'DELETE',
    }),
    async onQueryStarted({ id }, { dispatch, queryFulfilled }) {
      await queryFulfilled;
      dispatch(
        rootApiSlice.util.updateQueryData(
          // @ts-expect-error rootApiSlice doesn't have any endpoints in its type
          'getNodes', // <--- the query cache I need to manipulate,
                      // it is in the same slice actually, but I don't know of other way to reset it
                      // as updateQueryData exists only on the rootApiSlice.util, right? 
          { id },
          (draft) => { /*...*/}))}

// <--- the query cache I need to reset, it is in the same slice actually, but I don't know of other way to reset it

technically I can use the lazyApiSlice.endpoints.getNodes.name, but if the lazyApiSlice is big and I decide to split some endpoints into different files, then I can't just use lazyApiSlice in these files because lazyApiSlice imports these files itself, so there is a circular reference. I have bigger API slices split like this:

import { rootApiSlice } from '@/app/redux';

import { addNodeMutationBuilder } from './mutations/addNodeMutationBuilder';
import { deleteNodeMutationBuilder } from './mutations/deleteNodeMutationBuilder';

export const lazyApiSlice = rootApiSlice.injectEndpoints({
  endpoints: (build) => ({
    addNode: addNodeMutationBuilder(build),
    deleteNode: deleteNodeMutationBuilder(build),
    / * ... more of these APIs ... * /
  }),
});

I guess I could split things differently and use

const subsetOfLazyApiSlice = lazyApiSlice.injectEndpoints(/*...*/)

and then to keep things exported only from the lazyApiSlice file I could do something like

// lazyApiSlice.ts
export * from subsetOfLazyApiSlice

but IDK, it feels a bit odd and it is nice to have the endpoints list in one place

What I would like to have is the ability to augment the .endpoints field of the rootApiSlice in the same way as we augment lazily loaded state slices with

// store.ts
// augment this type in lazy module slices for RootState to have correct type
declare global {
  interface LazyLoadedSlices {}
}

export const rootReducer = combineSlices(
  applicationSlice,
  rootApiSlice
).withLazyLoadedSlices<LazyLoadedSlices>();

// some-lazy-module.ts
export const myModuleSliceToBeInjected = createSlice({
  name: 'myModuleSlice',
  initialState: {},
  reducers: {/*...*/}
});

export const myModuleSlice = myModuleSliceToBeInjected.injectInto(rootReducer)

declare global {
  interface LazyLoadedSlices
    extends WithSlice<typeof myModuleSliceToBeInjected> {}
}

or any other way to have correct endpoint names on the rootApiSlice would work I guess

[markerikson]

By definition rootApiSlice can only have the TS types of the endpoints that were passed in when it was created.

injectEndpoints returns the same runtime object reference, but with the updated TS types applied. So, lazyApiSlice's TS types know about the new endpoints, but they can't exist on rootApiSlice.

[maksnester]

that is what I figured out too, but what can be done about this? It practically means rootApiSlice.util.updateQueryData always has to be used with ts-expect-error for the endpoint name

[maksnester]

injectEndpoints returns the same runtime object reference, but with the updated TS types applied

wait, right, so lazyApiSlice.util.updateQueryData is actually a thing (I thought .util is available on the rootApiSlice only!) and it can be used with the endpoints from lazyApiSlice without issues. I mean, I see a TS error for this for some reason

      async onQueryStarted(
        { id, name },
        { dispatch, queryFulfilled }
      ) {
        lazyApiSlice.util.updateQueryData(
          // TS error here, but plain string 'lazyApiSliceEndpoint' works fine
          lazyApiSlice.endpoints.lazyApiSliceEndpoint.name 
          id,
          (draft: MyType) => {
            draft.name = name;
          }
        );

the error looks like this

TS2345: Argument of type string is not assignable to parameter of type
QueryKeys<{ lazyApiSliceEndpoint: MutationDefinition<{ id: number; name: string; }, /.../

I guess lazyApiSlice.endpoints.lazyApiSliceEndpoint.name has a string type, but expected a specific string literal from the endpoints object

[markerikson]

Yes, that's what I was trying to tell you. rootApiSlice cannot have the TS types of the endpoints defined in lazyApiSlice, but lazyApiSlice will have the combined TS types of both sets of endpoints. It's the same object, but with expanded TS types applied. So, that means it also has lazyApiSlice.util.updateQueryData.

And yes, the update utils expect a specific TS constant as an argument, such as "lazyApiSliceEndpoint". (Ultimately it's still just a string in the end, but TS wants it to be a specific known string matching the actual endpoint name.) So, you want updateQueryData("lazyApiSliceEndpoint", id, () => {}).

[maksnester]

@markerikson Yes, thank you.

BTW, related to this, do you have any recommendations on splitting bigger slices into files? I tried it this way:

import { rootApiSlice } from '@/app/redux';

import { addNodeMutationBuilder } from './mutations/addNodeMutationBuilder';
import { deleteNodeMutationBuilder } from './mutations/deleteNodeMutationBuilder';

export const lazyApiSlice = rootApiSlice.injectEndpoints({
  endpoints: (build) => ({
    addNode: addNodeMutationBuilder(build),
    deleteNode: deleteNodeMutationBuilder(build),
    / * ... more of these APIs ... * /
  }),
});

but it is kinda bad when I need to access lazyApiSlice.util in these builders as it would create an import cycle. I mean it kinda works even with the import cycle but you might have eslint rule complaining about it for example (and in general I don't think import cycles are great thing to have).

So what I had to do as a workaround is listing the endpoints I need to touch for cache manipulations like this in a separate file

import { rootApiSlice } from '@/app/redux';

export const lazyApiSliceEndpointsThatAreUsedForCacheManipulations =
  rootApiSlice.injectEndpoints({
    endpoints: (build) => ({
      getChildren: build.query({
        query() {},
      }),

      getNodes: build.query({
        query() {},
      }),

      nodeDetails: build.query({
        query() {},
      }),
    }),
  });

and then the lazyApiSlice would just override the endpoints like

export const lazyApiSlice =
  lazyApiSliceEndpointsThatAreUsedForCacheManipulations.injectEndpoints({
    overrideExisting: true,
    endpoints: (build) => ({
      addNode: addNodeMutationBuilder(build),
      /* ... */
      getChildren: getChildrenQueryBuilder(build),
      getNodes: getNodesQueryBuilder(build),

which works, but maybe a bit crazy just for splitting things into different files and yet having a single API slice that acts as an entry point to this API for UI components.