dev warnings for missing reducer or middleware (#1098)

general robustness

Author: phryneas

.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
       rules: {
         '@typescript-eslint/no-unused-expressions': 'off',
         'no-lone-blocks': 'off',
+        'no-sequences': 'off',
       },
     },
   ],

src/query/core/apiState.ts

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

src/query/core/buildInitiate.ts

@@ -10,11 +10,10 @@ import type {
   AnyAction,
   AsyncThunk,
   ThunkAction,
-  SerializedError} from '@reduxjs/toolkit';
-import {
-  unwrapResult
+  SerializedError,
 } from '@reduxjs/toolkit'
-import type { QuerySubState, SubscriptionOptions } from './apiState'
+import { unwrapResult } from '@reduxjs/toolkit'
+import type { QuerySubState, SubscriptionOptions, RootState } from './apiState'
 import type { InternalSerializeQueryArgs } from '../defaultSerializeQueryArgs'
 import type { Api } from '../apiTypes'
 import type { ApiEndpointQuery } from './module'
@@ -198,6 +197,23 @@ export function buildInitiate({
   } = api.internalActions
   return { buildInitiateQuery, buildInitiateMutation }
 
+  function middlewareWarning(getState: () => RootState<{}, string, string>) {
+    if (process.env.NODE_ENV !== 'production') {
+      if ((middlewareWarning as any).triggered) return
+      const registered = getState()[api.reducerPath]?.config
+        ?.middlewareRegistered
+      if (registered !== undefined) {
+        ;(middlewareWarning as any).triggered = true
+      }
+      if (registered === false) {
+        console.warn(
+          `Warning: Middleware for RTK-Query API at reducerPath "${api.reducerPath}" has not been added to the store.
+Features like automatic cache collection, automatic refetching etc. will not be available.`
+        )
+      }
+    }
+  }
+
   function buildInitiateQuery(
     endpointName: string,
     endpointDefinition: QueryDefinition<any, any, any, any>
@@ -221,6 +237,7 @@ export function buildInitiate({
         startedTimeStamp: Date.now(),
       })
       const thunkResult = dispatch(thunk)
+      middlewareWarning(getState)
       const { requestId, abort } = thunkResult
       const statePromise = Object.assign(
         thunkResult.then(() =>
@@ -275,6 +292,7 @@ export function buildInitiate({
         startedTimeStamp: Date.now(),
       })
       const thunkResult = dispatch(thunk)
+      middlewareWarning(getState)
       const { requestId, abort } = thunkResult
       const returnValuePromise = thunkResult
         .then(unwrapResult)

src/query/core/buildMiddleware/devMiddleware.ts

@@ -0,0 +1,23 @@
+import type { SubMiddlewareBuilder } from './types'
+
+export const build: SubMiddlewareBuilder = ({ api }) => {
+  return (mwApi) => {
+    let initialized = false
+    return (next) => (action) => {
+      if (!initialized) {
+        initialized = true
+        // dispatch before any other action
+        mwApi.dispatch(api.internalActions.middlewareRegistered())
+      }
+
+      const result = next(action)
+
+      if (api.util.resetApiState.match(action)) {
+        // dispatch after api reset
+        mwApi.dispatch(api.internalActions.middlewareRegistered())
+      }
+
+      return result
+    }
+  }
+}

src/query/core/buildMiddleware/index.ts

@@ -1,12 +1,7 @@
 import { compose } from 'redux'
 
-import type {
-  AnyAction,
-  Middleware,
-  ThunkDispatch} from '@reduxjs/toolkit';
-import {
-  createAction
-} from '@reduxjs/toolkit'
+import type { AnyAction, Middleware, ThunkDispatch } from '@reduxjs/toolkit'
+import { createAction } from '@reduxjs/toolkit'
 
 import type {
   EndpointDefinitions,
@@ -21,6 +16,7 @@ import type { BuildMiddlewareInput } from './types'
 import { build as buildWindowEventHandling } from './windowEventHandling'
 import { build as buildCacheLifecycle } from './cacheLifecycle'
 import { build as buildQueryLifecycle } from './queryLifecycle'
+import { build as buildDevMiddleware } from './devMiddleware'
 
 export function buildMiddleware<
   Definitions extends EndpointDefinitions,
@@ -35,6 +31,7 @@ export function buildMiddleware<
   }
 
   const middlewares = [
+    buildDevMiddleware,
     buildCacheCollection,
     buildInvalidationByTags,
     buildPolling,
@@ -56,8 +53,15 @@ export function buildMiddleware<
     RootState<Definitions, string, ReducerPath>,
     ThunkDispatch<any, any, AnyAction>
   > = (mwApi) => (next) => {
-    const chain = middlewares.map((middleware) => middleware(mwApi))
-    return compose<typeof next>(...chain)(next)
+    const applied = compose<typeof next>(
+      ...middlewares.map((middleware) => middleware(mwApi))
+    )(next)
+    return (action) => {
+      if (mwApi.getState()[reducerPath]) {
+        return applied(action)
+      }
+      return next(action)
+    }
   }
 
   return { middleware, actions }

src/query/core/buildSelectors.ts

@@ -133,7 +133,17 @@ export function buildSelectors<
   }
 
   function selectInternalState(rootState: RootState) {
-    return rootState[reducerPath]
+    const state = rootState[reducerPath]
+    if (process.env.NODE_ENV !== 'production') {
+      if (!state) {
+        if ((selectInternalState as any).triggered) return state
+        ;(selectInternalState as any).triggered = true
+        console.error(
+          `Error: No data found at \`state.${reducerPath}\`. Did you forget to add the reducer to the store?`
+        )
+      }
+    }
+    return state
   }
 
   function buildQuerySelector(
@@ -146,7 +156,7 @@ export function buildSelectors<
         (internalState) =>
           (queryArgs === skipToken
             ? undefined
-            : internalState.queries[
+            : internalState?.queries?.[
                 serializeQueryArgs({
                   queryArgs,
                   endpointDefinition,
@@ -168,7 +178,7 @@ export function buildSelectors<
         (internalState) =>
           (mutationId === skipToken
             ? undefined
-            : internalState.mutations[mutationId]) ?? defaultMutationSubState
+            : internalState?.mutations?.[mutationId]) ?? defaultMutationSubState
       )
       return createSelector(selectMutationSubstate, withRequestFlags)
     }

src/query/core/buildSlice.ts

@@ -85,7 +85,10 @@ export function buildSlice({
   mutationThunk: AsyncThunk<ThunkResult, MutationThunkArg, {}>
   context: ApiContext<EndpointDefinitions>
   assertTagType: AssertTagTypes
-  config: Omit<ConfigState<string>, 'online' | 'focused'>
+  config: Omit<
+    ConfigState<string>,
+    'online' | 'focused' | 'middlewareRegistered'
+  >
 }) {
   const resetApiState = createAction(`${reducerPath}/resetApiState`)
   const querySlice = createSlice({
@@ -168,7 +171,7 @@ export function buildSlice({
     name: `${reducerPath}/mutations`,
     initialState: initialState as MutationState<any>,
     reducers: {
-      unsubscribeResult(
+      unsubscribeMutationResult(
         draft,
         action: PayloadAction<MutationSubstateIdentifier>
       ) {
@@ -286,7 +289,7 @@ export function buildSlice({
           draft[queryCacheKey]![requestId] = options
         }
       },
-      unsubscribeResult(
+      unsubscribeQueryResult(
         draft,
         {
           payload: { queryCacheKey, requestId },
@@ -331,9 +334,14 @@ export function buildSlice({
     initialState: {
       online: isOnline(),
       focused: isDocumentVisible(),
+      middlewareRegistered: false,
       ...config,
     } as ConfigState<string>,
-    reducers: {},
+    reducers: {
+      middlewareRegistered(state) {
+        state.middlewareRegistered = true
+      },
+    },
     extraReducers: (builder) => {
       builder
         .addCase(onOnline, (state) => {
@@ -365,12 +373,10 @@ export function buildSlice({
     combinedReducer(resetApiState.match(action) ? undefined : state, action)
 
   const actions = {
-    updateSubscriptionOptions:
-      subscriptionSlice.actions.updateSubscriptionOptions,
-    queryResultPatched: querySlice.actions.queryResultPatched,
-    removeQueryResult: querySlice.actions.removeQueryResult,
-    unsubscribeQueryResult: subscriptionSlice.actions.unsubscribeResult,
-    unsubscribeMutationResult: mutationSlice.actions.unsubscribeResult,
+    ...configSlice.actions,
+    ...querySlice.actions,
+    ...subscriptionSlice.actions,
+    ...mutationSlice.actions,
     resetApiState,
   }
 

src/query/tests/buildHooks.test.tsx

@@ -12,7 +12,6 @@ import {
   actionsReducer,
   expectExactType,
   expectType,
-  matchSequence,
   setupApiStore,
   useRenderCounter,
   waitMs,
@@ -1268,16 +1267,15 @@ describe('hooks tests', () => {
       )
 
       const { checkSession, login } = api.endpoints
-      const completeSequence = [
+      expect(storeRef.store.getState().actions).toMatchSequence(
+        api.internalActions.middlewareRegistered.match,
         checkSession.matchPending,
         checkSession.matchRejected,
         login.matchPending,
         login.matchFulfilled,
         checkSession.matchPending,
-        checkSession.matchFulfilled,
-      ]
-
-      matchSequence(storeRef.store.getState().actions, ...completeSequence)
+        checkSession.matchFulfilled
+      )
     })
   })
 })
@@ -1878,15 +1876,14 @@ describe('hooks with createApi defaults set', () => {
 
       const { increment } = api.endpoints
 
-      const completeSequence = [
+      expect(storeRef.store.getState().actions).toMatchSequence(
+        api.internalActions.middlewareRegistered.match,
         increment.matchPending,
         increment.matchFulfilled,
         api.internalActions.unsubscribeMutationResult.match,
         increment.matchPending,
-        increment.matchFulfilled,
-      ]
-
-      matchSequence(storeRef.store.getState().actions, ...completeSequence)
+        increment.matchFulfilled
+      )
     })
 
     it('causes rerenders when only selected data changes', async () => {

src/query/tests/buildMiddleware.test.tsx

@@ -1,5 +1,5 @@
 import { createApi } from '@reduxjs/toolkit/query'
-import { actionsReducer, matchSequence, setupApiStore, waitMs } from './helpers'
+import { actionsReducer, setupApiStore, waitMs } from './helpers'
 
 const baseQuery = (args?: any) => ({ data: args })
 const api = createApi({
@@ -28,8 +28,8 @@ const storeRef = setupApiStore(api, {
 
 it('invalidates the specified tags', async () => {
   await storeRef.store.dispatch(getBanana.initiate(1))
-  matchSequence(
-    storeRef.store.getState().actions,
+  expect(storeRef.store.getState().actions).toMatchSequence(
+    api.internalActions.middlewareRegistered.match,
     getBanana.matchPending,
     getBanana.matchFulfilled
   )
@@ -40,21 +40,21 @@ it('invalidates the specified tags', async () => {
   await waitMs(20)
 
   const firstSequence = [
+    api.internalActions.middlewareRegistered.match,
     getBanana.matchPending,
     getBanana.matchFulfilled,
     api.util.invalidateTags.match,
     getBanana.matchPending,
     getBanana.matchFulfilled,
   ]
-  matchSequence(storeRef.store.getState().actions, ...firstSequence)
+  expect(storeRef.store.getState().actions).toMatchSequence(...firstSequence)
 
   await storeRef.store.dispatch(getBread.initiate(1))
   await storeRef.store.dispatch(api.util.invalidateTags([{ type: 'Bread' }]))
 
   await waitMs(20)
 
-  matchSequence(
-    storeRef.store.getState().actions,
+  expect(storeRef.store.getState().actions).toMatchSequence(
     ...firstSequence,
     getBread.matchPending,
     getBread.matchFulfilled,

src/query/tests/buildSlice.test.ts

@@ -30,6 +30,7 @@ const authSlice = createSlice({
 const storeRef = setupApiStore(api, { auth: authSlice.reducer })
 
 it('only resets the api state when resetApiState is dispatched', async () => {
+  storeRef.store.dispatch({ type: 'unrelated' }) // trigger "registered middleware" into place
   const initialState = storeRef.store.getState()
 
   await storeRef.store.dispatch(
@@ -41,6 +42,7 @@ it('only resets the api state when resetApiState is dispatched', async () => {
       config: {
         focused: true,
         keepUnusedDataFor: 60,
+        middlewareRegistered: true,
         online: true,
         reducerPath: 'api',
         refetchOnFocus: false,