How to use enahnce api for multipe code generated files

[deyancyan]

I went through the Q&As but did not seem to find exactly what I was looking for. Closest was this #2506 (comment)

So my issue is the following - I have a base api file and several code generated files that use injectEndpoints. Also what I would like is to be able to use enhanceEndpoints for tag management and response transformation. My structure looks like this:

Lets say I do this in the api-enhanced file:

Now I am using the enhancedApi export to configure the store but when I log the order of files execution I get the following:

• api-base
• api-enhanced
• bulk (or any other code generated file that seems to be used on the current page)

This seems to be a problem as the configuration done in api-enhanced does not have any effect.

On the other hand when I do the following:

This seems to correctly work correctly when I use the enhancedApi export to configure the store. I am not sure which api definition to use and how to mitigate such behaviour since using the last enhanced api as an export is kind of weird.

Maybe combining all enhanced api's into a single would provide some peace of mind. I get it that they all work on the same reference but it is still quite strange especially for someone else that has no debbuged the issue.

Any ideas?

[EskiMojo14]

enhanceEndpoints should be called on the version of the API that has the endpoints you need injected (i.e. the result of calling injectEndpoints). this ensures that they'll be injected before the enhancement runs.

[deyancyan]

This one I did figure out. Also TS is recognizing the endpoint names this way. But the other question remains - what to do when you have multiple files with injectEndpoints and how to configure the store?

Just calling enhanceEndpoints on every api chunk is fine but yields no result when I configure the store with the base api.

[EskiMojo14]

assuming you don't have control over the generated files:

// src/api/base
export const baseApi = createApi();

// src/api/bulk
export const bulkApi = baseApi.injectEndpoints();

// if you can control it, this could be in the same file as the original injectEndpoints call
// src/api/bulk-enhanced
export const enhancedBulkApi = bulkApi.enhanceEndpoints();

export const { useABulkQuery } = enhancedBulkApi // by importing this hook somewhere you ensure that the inject and enhance calls happen

// src/store
import { baseApi } from "src/api/base";

export const store = configureStore({
  reducers: {
    [baseApi.reducerPath]: baseApi.reducer
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(baseApi.middleware)
})

[deyancyan]

Ah, interesting. I have not tried to export the hooks from the enhancedApi. I was using the ones that are exported during code generation. Will give this a go. Thanks

[EskiMojo14]

yeah, ultimately you can only ensure the code happens by importing from it - otherwise the code is never actually executed

[deyancyan]

Great, seems to work.

Another problem that I found is that I had package.json>sideEffects: false and that is why import './api-enhanced' in the index file failed to evaluate the script.

Many thanks!