How to use middleware from different APIs in the same store

[apstechlead]

Could someone please share how you configure your store using different api reducers? Specifically how you concatenate the middleware. I'm trying to register the middleware of 2 different APIs and I can't seem to find the way. Chaining concat calls is not working for me. They both work fine individually, but when I register both I'm facing issues.

This is my store configuration:

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

The middleware property is throwing a type error. Even if I force-compile I'm getting the following runtime error hinting that the middleware is not present:

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'providesTags')

Any assistance here would be greatly appreciated.

[phryneas]

I would assume you did not provide a reducerPath in your createApi call, which will make the reducerPath for both of them just api.

That said, there is a 99% chance that you should not have multiple apis, but one big api.

Multiple apis would mean "one api for facebook and one api for a car rental". One api would be "multiple endpoints, but the data has any kind of relation with each other". Stuff like invalidation etc. does not work over api borders. It is very likely that you want one api and use code splitting to split that up in multiple files.

[apstechlead]

Thank you @phryneas I didn't think about this. The reducer path was indeed the issue.

I understand why you would say we don't need multiple APIs.

Our API calls all go through the same gateway so they share the same host name, but our issue is the following:
We have many microservices each with their own API definitions and we are using rtk-query-codegen-openapi to generate the client APIs. So unless there is a way to merge APIs or definitions from different services, we will stick with having separate APIs in order to leverage code generation.

[phryneas]

Ah. One more reason to switch the Codegen to only injectEndpoints in the next release of the Codegen :)