Configuring Multiple API's

[jd-carroll]

Background:

• We have two different API's we are using in our app. For the sake of it, let's call one Facebook and the other Car Rental.
• The APIs are completely unrelated, therefore no need for invalidation across both
• They have completely separate hostnames

My question is twofold:

• Is my configuration below correct?
• Are there significant performance or memory impacts by having multiple API's (again, assume it is not possible to merge into one)?

[Basic] Configuration

export const FacebookApi = createApi({
  reducerPath: 'fb-api',
  baseQuery: fetchBaseQuery({ baseUrl: fbUrl }),
  endpoints: () => ({})
});

export const CarRentalApi = createApi({
  reducerPath: 'vroom-api',
  baseQuery: fetchBaseQuery({ baseUrl: honkUrl }),
  endpoints: () => ({})
});

const reducer = combineReducers({
  [FacebookApi.reducerPath]: FacebookApi.reducer,
  [CarRentalApi.reducerPath]: CarRentalApi.reducer
})

const ListenerMiddleware = createListenerMiddleware()

const store = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware()
      .prepend(ListenerMiddleware.middleware)
      .concat(logger, FacebookApi.middleware, CarRentalApi.middleware)
});

[markerikson]

Yep, that looks right.

Each API middleware that you add to the store does add some fixed amount of overhead in terms of processing checks that are done against every dispatched action. 2 API middleware added is okay. 30 is too much :)