How to configureStore Mutiple middleware in RTK query

Question

redux-toolkit given original doc--

import { configureStore } from '@reduxjs/toolkit'
// Or from '@reduxjs/toolkit/query/react'
import { setupListeners } from '@reduxjs/toolkit/query'
import { pokemonApi } from './services/pokemon'

export const store = configureStore({
  reducer: {
    // Add the generated reducer as a specific top-level slice
    [pokemonApi.reducerPath]: pokemonApi.reducer,
  },
  // Adding the api middleware enables caching, invalidation, polling,
  // and other useful features of `rtk-query`.
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(pokemonApi.middleware),
})

// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
setupListeners(store.dispatch)

my code

import { configureStore } from '@reduxjs/toolkit'
import newletterReducer from '../slicers/newletter/newsletterSlicer'
import { setupListeners } from '@reduxjs/toolkit/query'
import { getmoviesdetails } from '../slicers/service/getmoviedetails'
import { authService } from '../slicers/service/auth/authService'

export const store = configureStore({
    reducer: {
        newsletter: newletterReducer,
        [getmoviesdetails.reducerPath]: getmoviesdetails.reducer,
        [authService.reducerPath]: authService.reducer,
    },
    middleware:
        (getdefaultMiddleware) =>
            {return getdefaultMiddleware().concat(getmoviesdetails.middleware)
                ,getdefaultMiddleware().concat(authService.middleware)}
                     
            

})

setupListeners(store.dispatch)

they given error buildInitiate.ts:248 Warning: Middleware for RTK-Query API at reducerPath "getmoviedetails" has not been added to the store. Features like automatic cache collection, automatic refetching etc. will not be available.

Answer 1

You can do it like this:

middleware:
        (getdefaultMiddleware) =>
            getdefaultMiddleware()
            .concat([
                     getmoviesdetails.middleware, 
                     authService.middleware
                   ])

Basically you can pass all your middleware in a array.