warn on duplicate reducerPath (#1252)

Author: phryneas

packages/toolkit/src/query/apiTypes.ts

@@ -44,6 +44,7 @@ export type Module<Name extends ModuleName> = {
 }
 
 export interface ApiContext<Definitions extends EndpointDefinitions> {
+  apiUid: string
   endpointDefinitions: Definitions
   batch(cb: () => void): void
 }

packages/toolkit/src/query/core/apiState.ts

@@ -241,7 +241,7 @@ export type ConfigState<ReducerPath> = RefetchConfigOptions & {
   reducerPath: ReducerPath
   online: boolean
   focused: boolean
-  middlewareRegistered: boolean
+  middlewareRegistered: boolean | 'conflict'
 } & ModifiableConfigState
 
 export type ModifiableConfigState = {

packages/toolkit/src/query/core/buildMiddleware/devMiddleware.ts

@@ -1,20 +1,44 @@
 import type { SubMiddlewareBuilder } from './types'
 
-export const build: SubMiddlewareBuilder = ({ api }) => {
+export const build: SubMiddlewareBuilder = ({
+  api,
+  context: { apiUid },
+  reducerPath,
+}) => {
   return (mwApi) => {
     let initialized = false
     return (next) => (action) => {
       if (!initialized) {
         initialized = true
         // dispatch before any other action
-        mwApi.dispatch(api.internalActions.middlewareRegistered())
+        mwApi.dispatch(api.internalActions.middlewareRegistered(apiUid))
       }
 
       const result = next(action)
 
       if (api.util.resetApiState.match(action)) {
         // dispatch after api reset
-        mwApi.dispatch(api.internalActions.middlewareRegistered())
+        mwApi.dispatch(api.internalActions.middlewareRegistered(apiUid))
+      }
+
+      if (
+        typeof process !== 'undefined' &&
+        process.env.NODE_ENV === 'development'
+      ) {
+        if (
+          api.internalActions.middlewareRegistered.match(action) &&
+          action.payload === apiUid &&
+          mwApi.getState()[reducerPath]?.config?.middlewareRegistered ===
+            'conflict'
+        ) {
+          console.warn(`There is a mismatch between slice and middleware for the reducerPath "${reducerPath}".
+You can only have one api per reducer path, this will lead to crashes in various situations!${
+            reducerPath === 'api'
+              ? `
+If you have multiple apis, you *have* to specify the reducerPath option when using createApi!`
+              : ''
+          }`)
+        }
       }
 
       return result

packages/toolkit/src/query/core/buildSlice.ts

@@ -78,7 +78,7 @@ export function buildSlice({
   reducerPath,
   queryThunk,
   mutationThunk,
-  context: { endpointDefinitions: definitions },
+  context: { endpointDefinitions: definitions, apiUid },
   assertTagType,
   config,
 }: {
@@ -258,9 +258,8 @@ export function buildSlice({
               const subscribedQueries = ((draft[type] ??= {})[
                 id || '__internal_without_id'
               ] ??= [])
-              const alreadySubscribed = subscribedQueries.includes(
-                queryCacheKey
-              )
+              const alreadySubscribed =
+                subscribedQueries.includes(queryCacheKey)
               if (!alreadySubscribed) {
                 subscribedQueries.push(queryCacheKey)
               }
@@ -339,8 +338,11 @@ export function buildSlice({
       ...config,
     } as ConfigState<string>,
     reducers: {
-      middlewareRegistered(state) {
-        state.middlewareRegistered = true
+      middlewareRegistered(state, { payload }: PayloadAction<string>) {
+        state.middlewareRegistered =
+          state.middlewareRegistered === 'conflict' || apiUid !== payload
+            ? 'conflict'
+            : true
       },
     },
     extraReducers: (builder) => {

packages/toolkit/src/query/createApi.ts

@@ -1,16 +1,13 @@
 import type { Api, ApiContext, Module, ModuleName } from './apiTypes'
 import type { BaseQueryArg, BaseQueryFn } from './baseQueryTypes'
-import type {
-  SerializeQueryArgs} from './defaultSerializeQueryArgs';
-import {
-  defaultSerializeQueryArgs
-} from './defaultSerializeQueryArgs'
+import type { SerializeQueryArgs } from './defaultSerializeQueryArgs'
+import { defaultSerializeQueryArgs } from './defaultSerializeQueryArgs'
 import type {
   EndpointBuilder,
-  EndpointDefinitions} from './endpointDefinitions';
-import {
-  DefinitionType
+  EndpointDefinitions,
 } from './endpointDefinitions'
+import { DefinitionType } from './endpointDefinitions'
+import { nanoid } from '@reduxjs/toolkit'
 
 export interface CreateApiOptions<
   BaseQuery extends BaseQueryFn,
@@ -100,10 +97,10 @@ export interface CreateApiOptions<
   ): Definitions
   /**
    * Defaults to `60` _(this value is in seconds)_. This is how long RTK Query will keep your data cached for **after** the last component unsubscribes. For example, if you query an endpoint, then unmount the component, then mount another component that makes the same request within the given time frame, the most recent value will be served from the cache.
-   * 
+   *
    * ```ts
    * // codeblock-meta title="keepUnusedDataFor example"
-   * 
+   *
    * import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
    * interface Post {
    *   id: number
@@ -206,6 +203,7 @@ export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
         // placeholder "batch" method to be overridden by plugins, for example with React.unstable_batchedUpdate
         fn()
       },
+      apiUid: nanoid(),
     }
 
     const api = {

packages/toolkit/src/query/tests/devWarnings.test.tsx

@@ -20,28 +20,36 @@ afterEach(() => {
   restore()
 })
 
+const baseUrl =  'http://example.com'
+
 function createApis() {
   const api1 = createApi({
-    reducerPath: 'api1',
-    baseQuery: fetchBaseQuery({}),
+    baseQuery: fetchBaseQuery({ baseUrl }),
+    endpoints: (builder) => ({
+      q1: builder.query({ query: () => '/success' }),
+    }),
+  })
+
+  const api1_2 = createApi({
+    baseQuery: fetchBaseQuery({baseUrl}),
     endpoints: (builder) => ({
       q1: builder.query({ query: () => '/success' }),
     }),
   })
 
   const api2 = createApi({
     reducerPath: 'api2',
-    baseQuery: fetchBaseQuery({}),
+    baseQuery: fetchBaseQuery({baseUrl}),
     endpoints: (builder) => ({
       q1: builder.query({ query: () => '/success' }),
     }),
   })
-  return [api1, api2] as const
+  return [api1, api1_2, api2] as const
 }
 
-let [api1, api2] = createApis()
+let [api1, api1_2, api2] = createApis()
 beforeEach(() => {
-  ;[api1, api2] = createApis()
+  ;[api1, api1_2, api2] = createApis()
 })
 
 describe('missing middleware', () => {
@@ -50,42 +58,49 @@ describe('missing middleware', () => {
     ['production', false],
   ])('%s warns if middleware is missing: %s', ([env, shouldWarn]) => {
     ;(process.env as any).NODE_ENV = env
-    const store = configureStore({ reducer: { api1: api1.reducer } })
+    const store = configureStore({
+      reducer: { [api1.reducerPath]: api1.reducer },
+    })
     store.dispatch(api1.endpoints.q1.initiate(undefined))
     expect(getLog().log).toBe(
       shouldWarn
-        ? `Warning: Middleware for RTK-Query API at reducerPath "api1" has not been added to the store.
+        ? `Warning: Middleware for RTK-Query API at reducerPath "api" has not been added to the store.
 Features like automatic cache collection, automatic refetching etc. will not be available.`
         : ''
     )
   })
 
   test('does not warn if middleware is not missing', () => {
     const store = configureStore({
-      reducer: { api1: api1.reducer },
+      reducer: { [api1.reducerPath]: api1.reducer },
       middleware: (gdm) => gdm().concat(api1.middleware),
     })
     store.dispatch(api1.endpoints.q1.initiate(undefined))
     expect(getLog().log).toBe(``)
   })
 
   test('warns only once per api', () => {
-    const store = configureStore({ reducer: { api1: api1.reducer } })
+    const store = configureStore({
+      reducer: { [api1.reducerPath]: api1.reducer },
+    })
     store.dispatch(api1.endpoints.q1.initiate(undefined))
     store.dispatch(api1.endpoints.q1.initiate(undefined))
     expect(getLog().log)
-      .toBe(`Warning: Middleware for RTK-Query API at reducerPath "api1" has not been added to the store.
+      .toBe(`Warning: Middleware for RTK-Query API at reducerPath "api" has not been added to the store.
 Features like automatic cache collection, automatic refetching etc. will not be available.`)
   })
 
   test('warns multiple times for multiple apis', () => {
     const store = configureStore({
-      reducer: { api1: api1.reducer, api2: api2.reducer },
+      reducer: {
+        [api1.reducerPath]: api1.reducer,
+        [api2.reducerPath]: api2.reducer,
+      },
     })
     store.dispatch(api1.endpoints.q1.initiate(undefined))
     store.dispatch(api2.endpoints.q1.initiate(undefined))
     expect(getLog().log)
-      .toBe(`Warning: Middleware for RTK-Query API at reducerPath "api1" has not been added to the store.
+      .toBe(`Warning: Middleware for RTK-Query API at reducerPath "api" has not been added to the store.
 Features like automatic cache collection, automatic refetching etc. will not be available.
 Warning: Middleware for RTK-Query API at reducerPath "api2" has not been added to the store.
 Features like automatic cache collection, automatic refetching etc. will not be available.`)
@@ -117,15 +132,15 @@ describe('missing reducer', () => {
       api1.endpoints.q1.select(undefined)(store.getState())
       expect(getLog().log).toBe(
         shouldWarn
-          ? 'Error: No data found at `state.api1`. Did you forget to add the reducer to the store?'
+          ? 'Error: No data found at `state.api`. Did you forget to add the reducer to the store?'
           : ''
       )
     })
   })
 
   test('does not warn if reducer is not missing', () => {
     const store = configureStore({
-      reducer: { api1: api1.reducer },
+      reducer: { [api1.reducerPath]: api1.reducer },
       middleware: (gdm) => gdm().concat(api1.middleware),
     })
     api1.endpoints.q1.select(undefined)(store.getState())
@@ -143,7 +158,7 @@ describe('missing reducer', () => {
     // @ts-expect-error
     api1.endpoints.q1.select(undefined)(store.getState())
     expect(getLog().log).toBe(
-      'Error: No data found at `state.api1`. Did you forget to add the reducer to the store?'
+      'Error: No data found at `state.api`. Did you forget to add the reducer to the store?'
     )
   })
 
@@ -158,7 +173,7 @@ describe('missing reducer', () => {
     // @ts-expect-error
     api2.endpoints.q1.select(undefined)(store.getState())
     expect(getLog().log).toBe(
-      'Error: No data found at `state.api1`. Did you forget to add the reducer to the store?\nError: No data found at `state.api2`. Did you forget to add the reducer to the store?'
+      'Error: No data found at `state.api`. Did you forget to add the reducer to the store?\nError: No data found at `state.api2`. Did you forget to add the reducer to the store?'
     )
   })
 })
@@ -171,10 +186,91 @@ test('warns only for reducer if everything is missing', async () => {
   api1.endpoints.q1.select(undefined)(store.getState())
   await store.dispatch(api1.endpoints.q1.initiate(undefined))
   expect(getLog().log).toBe(
-    'Error: No data found at `state.api1`. Did you forget to add the reducer to the store?'
+    'Error: No data found at `state.api`. Did you forget to add the reducer to the store?'
   )
 })
 
+describe('warns on multiple apis using the same `reducerPath`', () => {
+  test('common: two apis, same order', async () => {
+    const store = configureStore({
+      reducer: {
+        [api1.reducerPath]: api1.reducer,
+        [api1_2.reducerPath]: api1_2.reducer,
+      },
+      middleware: (gDM) => gDM().concat(api1.middleware, api1_2.middleware),
+    })
+    await store.dispatch(api1.endpoints.q1.initiate(undefined))
+    // only second api prints
+    expect(getLog().log).toBe(
+      `There is a mismatch between slice and middleware for the reducerPath "api".
+You can only have one api per reducer path, this will lead to crashes in various situations!
+If you have multiple apis, you *have* to specify the reducerPath option when using createApi!`
+    )
+  })
+
+  test('common: two apis, opposing order', async () => {
+    const store = configureStore({
+      reducer: {
+        [api1.reducerPath]: api1.reducer,
+        [api1_2.reducerPath]: api1_2.reducer,
+      },
+      middleware: (gDM) => gDM().concat(api1_2.middleware, api1.middleware),
+    })
+    await store.dispatch(api1.endpoints.q1.initiate(undefined))
+    // both apis print
+    expect(getLog().log).toBe(
+      `There is a mismatch between slice and middleware for the reducerPath "api".
+You can only have one api per reducer path, this will lead to crashes in various situations!
+If you have multiple apis, you *have* to specify the reducerPath option when using createApi!
+There is a mismatch between slice and middleware for the reducerPath "api".
+You can only have one api per reducer path, this will lead to crashes in various situations!
+If you have multiple apis, you *have* to specify the reducerPath option when using createApi!`
+    )
+  })
+
+  test('common: two apis, only first middleware', async () => {
+    const store = configureStore({
+      reducer: {
+        [api1.reducerPath]: api1.reducer,
+        [api1_2.reducerPath]: api1_2.reducer,
+      },
+      middleware: (gDM) => gDM().concat(api1.middleware),
+    })
+    await store.dispatch(api1.endpoints.q1.initiate(undefined))
+
+    expect(getLog().log).toBe(
+      `There is a mismatch between slice and middleware for the reducerPath "api".
+You can only have one api per reducer path, this will lead to crashes in various situations!
+If you have multiple apis, you *have* to specify the reducerPath option when using createApi!`
+    )
+  })
+
+  /**
+   * This is the one edge case that we currently cannot detect:
+   * Multiple apis with the same reducer key and only the middleware of the last api is being used.
+   *
+   * It would be great to support this case as well, but for now:
+   * "It is what it is."
+   */
+  test.skip('common: two apis, only second middleware', async () => {
+    const store = configureStore({
+      reducer: {
+        [api1.reducerPath]: api1.reducer,
+        [api1_2.reducerPath]: api1_2.reducer,
+      },
+      middleware: (gDM) => gDM().concat(api1_2.middleware),
+    })
+    await store.dispatch(api1.endpoints.q1.initiate(undefined))
+
+    expect(getLog().log).toBe(
+      `There is a mismatch between slice and middleware for the reducerPath "api".
+You can only have one api per reducer path, this will lead to crashes in various situations!
+If you have multiple apis, you *have* to specify the reducerPath option when using createApi!`
+    )
+  })
+})
+
+
 describe('`console.error` on unhandled errors during `initiate`', () => {
   test('error thrown in `baseQuery`', async () => {
     const api = createApi({
@@ -248,7 +344,7 @@ In the case of an unhandled error, no tags will be "provided" or "invalidated".
   test('`fetchBaseQuery`: error thrown in `prepareHeaders`', async () => {
     const api = createApi({
       baseQuery: fetchBaseQuery({
-        baseUrl: 'http://example.com',
+        baseUrl,
         prepareHeaders() {
           throw new Error('this was kinda expected')
         },
@@ -275,7 +371,7 @@ In the case of an unhandled error, no tags will be "provided" or "invalidated".
   test('`fetchBaseQuery`: error thrown in `validateStatus`',  async () => {
     const api = createApi({
       baseQuery: fetchBaseQuery({
-        baseUrl: 'http://example.com',
+        baseUrl
               }),
       endpoints: (build) => ({
         val: build.query<any, void>({