Redux API Middleware Interceptor

1.0.4 verified Sat Apr 25 auth: no javascript

A Redux middleware that wraps redux-api-middleware to intercept API calls, allowing automatic header injection (e.g., JWT), base URL prepending, and callbacks for request lifecycle events (init, success, failure). Works with redux-api-middleware ^2.0.0 and Redux's applyMiddleware. Simple API: pass a config object to the exported function. Two releases: 1.0.4 is current stable. Not frequently updated, but functional for its niche.

Common errors

error Uncaught Error: [redux-api-middleware-interceptor] getURL must be a function ↓

cause getURL config property is provided but is not a function (e.g., string or object).

fix

Change getURL to a function: getURL: (url, state) => https://example.com${url}

error Uncaught TypeError: interceptor is not a function ↓

cause Importing default export incorrectly in CommonJS or forgetting to call interceptor().

fix

Use const interceptor = require('redux-api-middleware-interceptor'); then call interceptor({...}) as function.

error TypeError: Cannot read property 'jwt' of undefined ↓

cause State shape does not match expectations: trying to access state.auth.jwt but auth reducer is not at that path.

fix

Check your store's state tree and adjust the headers function to access state.auth?.jwt or equivalent.

Warnings

gotcha Interceptor middleware must be placed before redux-api-middleware's apiMiddleware in the middleware chain. ↓

fix Ensure order: interceptor(config), apiMiddleware, thunk, etc.

gotcha If getURL is not defined, interceptor will not transform URLs; if defined but not a function, throws an error. ↓

fix Provide a function to getURL; e.g., getURL: (url, state) => `https://base${url}`

gotcha When using headers as a function, it must return an object; otherwise original headers are silently used. ↓

fix Ensure the function always returns a headers object, e.g., return { ...origHeaders, ...myHeaders };

gotcha onRequestInit, onRequestSuccess, onRequestFail callbacks are optional but must be functions if provided, otherwise throws error. ↓

fix Only provide callbacks as functions. Use null or omit them if not needed.

gotcha The interceptor only modifies requests made via redux-api-middleware's CALL_API symbol; regular fetch calls are unaffected. ↓

fix Ensure all API calls use RSAA action with [CALL_API] to benefit from interceptor.

Install

npm install redux-api-middleware-interceptor

yarn add redux-api-middleware-interceptor

pnpm add redux-api-middleware-interceptor

Imports

interceptor
wrong
```
const interceptor = require('redux-api-middleware-interceptor').default
```
correct
```
import interceptor from 'redux-api-middleware-interceptor'
```
Default export as a function. CommonJS users must require the module directly: const interceptor = require('redux-api-middleware-interceptor') and it will work directly (no .default needed).
CALL_API
wrong
```
import { CALL_API } from 'redux-api-middleware-interceptor'
```
correct
```
import { CALL_API } from 'redux-api-middleware'
```
CALL_API is re-exported from the parent package, not from interceptor. Always import from redux-api-middleware.

applyMiddleware / createStore

wrong

import { applyMiddleware, createStore } from 'redux-api-middleware-interceptor'

correct

import { applyMiddleware, createStore } from 'redux'

Standard Redux exports; not part of interceptor package.

Quickstart

Shows complete setup: interceptor middleware injected before apiMiddleware, with custom headers, base URL, and lifecycle callbacks.

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import interceptor from 'redux-api-middleware-interceptor';
import { CALL_API, apiMiddleware } from 'redux-api-middleware';

const store = createStore(
  reducer,
  applyMiddleware(
    interceptor({
      headers: (origHeaders, state) => ({
        ...origHeaders,
        Authorization: state.auth?.jwt ? `Bearer ${state.auth.jwt}` : '',
      }),
      getURL: (url, state) => `https://api.example.com${url}`,
      onRequestInit: (state) => console.log('API request started'),
      onRequestSuccess: (state, response) => console.log('API request succeeded', response),
      onRequestFail: (state, error) => console.error('API request failed', error),
    }),
    apiMiddleware,
    thunk
  )
);

// Usage: dispatch an RSAA action as usual
store.dispatch({
  [CALL_API]: {
    endpoint: '/users',
    method: 'GET',
    types: ['REQUEST', 'SUCCESS', 'FAILURE']
  }
});