Request middleware

[samuelcastro]

How to build up a redux middleware that would intercept the request headers before it goes out, for example, to automatically include an authentication JWT in the http header.

I know that there is discussion about it here #3 and here #31, but honestly it's not clear how this could be implemented with redux-query.

Thanks.

[trashstack]

Hi @samuelcastro,

If you wanted to add a header like Authorization: Bearer abc123 to a single request you can do so by adding it to the options in the query config e.g.

const jwtToken = 'abc123';
const queryConfig = {
  url: '/some-jwt-secured-endpoint',
  options: {
    headers: {
      authorization: `Bearer ${jwtToken}`,
    },
  },
};
dispatch(requestAsync(queryConfig));

In order to do this for every request you can apply a middleware to redux. It could look something like this:

import { actionTypes } from 'redux-query';

const { MUTATE_ASYNC, REQUEST_ASYNC } = actionTypes;
const jwtToken = 'abc123';

const jwtMiddleware = store => next => action => {
  if (action && (action.type === MUTATE_ASYNC || action.type === REQUEST_ASYNC)) {
    // This is a redux-query action so add the JWT header
    const options = action.options || {};
    const headers = options.headers || {};
    const updatedAction = {
      ...action,
      options: {
        ...options,
        headers: {
          ...headers,
          authorization: `Bearer ${jwtToken}`,
      },
    };
    
    // Let the action continue, but now with the JWT header.
    next(updatedAction);
  } else {
    // This isn't a redux-query action so just let it pass through
    next(action);
  }
};

[samuelcastro]

@ManThursday Thanks, that's exactly what I need!