RTK Query: How can you force dispatch an API error on null HTTP 200 responses?

[ealexhaywood]

Hi all,

Our UI is interfacing with a backend that returns HTTP 200s with null response bodies for entities that are not found. Ideally the backend would return a proper 404 but we don't any control over their API.

We want to these instances to be considered an error in our UI code so our components can render the proper error views. I wrote a "null-checking" middleware to try to force RTK Query to dispatch an error:

import { isFulfilled } from '@reduxjs/toolkit';

const nullCheckMiddleware = () => (next) => (action) => {
  if (isFulfilled(action) && action?.type.startsWith('appApi') && action?.payload === null) {
    return next({
      ...action,
      type: 'appApi/executeQuery/rejected',
      error: 'The response was null!'
    })
  }
}

And I register this middleware with my store

export const store = configureStore({
  reducer: reducers,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat([api.middleware, nullCheckMiddleware]),
})

I thought it was working well at first but it seems like it causes query hooks to go into an infinite loop of appApi/executeQuery/pending, appApi/executeQuery/rejected, and appApi/subscriptions/unsubscribeQueryResult actions being dispatched.

Any ideas if I'm on the right track?

[phryneas]

Not really - do this in a baseQuery wrapper, not in a middleware.

[ealexhaywood]

Thanks, I'll try this out tomorrow!

[ealexhaywood]

Hey there, was able to circle back around on this and writing a baseQuery wrapper did the trick! Thank you for the recommendation and thank you for all the work you do for the community.

Here's the code for anyone who may stumble upon this in the future. Following the docs:

const baseQuery = fetchbaseQuery({ baseUrl: '/' });

const baseQueryWithNullChecking: BaseQueryFn<
  string | FetchArgs, 
  unknown, 
  FetchBaseQueryError
> = async (args, api, extraOptions) => {
  const result = await baseQuery(args, api, extraOptions);
  if (result.data === null) {
    return { error: { status: 404, data: 'The response was null!' } }
  }
  
  return result;
}

Much cleaner than the middleware stuff I was doing before.