4

I'm using RTKQuery to fetch data as following:

export const productsApi = createApi({
  reducerPath: 'productsApi',
  baseQuery: fetchBaseQuery({
    baseUrl: BASE_URL,
    prepareHeaders,
  }),
  tagTypes: ['Products'],
  keepUnusedDataFor: 8600,
  endpoints: builder => ({
    getProperties: builder.query<IProduct[], IParams>({
      query: params => ({ url: 'products', params: { per_page: 40, ...params } }),
      transformResponse: ({ data }: { data: IProduct[] }) => data,
      providesTags: ['Products'],
    }),
  });

I am relatively new to Redux Toolkit and started it using directly before using any of Redux. From the ReduxToolkit documentation, I'm finding 2 ways to catch and put actions on the backend.

  1. Using Async thunk.
  2. Middleware

I tried using the code as follows with the Middleware approach:

export const rtkQueryErrorLogger: Middleware = (api: MiddlewareAPI) => next => action => {
  if (isRejected(action)) {
     console.log(action);
  }
  return next(action);
}

But this does not catch the 40x/50x errors. What should be the way to handle this?

The purpose is to say send logs to the server upon catching these errors with meta-information. I was following: https://redux-toolkit.js.org/rtk-query/usage/error-handling#handling-errors-at-a-macro-level as a reference.

Y M
  • 2,105
  • 1
  • 22
  • 44
  • What exactly is your use case here? Generally, every endpoint will handle this and just switch into an "error" state. – phry Apr 11 '22 at 11:17
  • I want a common method to send logs to the server and show a toast maybe to the end-user. @phry Can this be done using a middleware function like `rtkQueryErrorLogger` – Y M Apr 11 '22 at 11:23
  • That should be doable like in the link you gave there. Did you maybe forget to add that middleware to `configureStore`? – phry Apr 11 '22 at 13:14
  • I did add that. But only cancelled rejected issues show up in the console and not the 404 errors. – Y M Apr 12 '22 at 05:13
  • Do those show up within RTK Query as errors? If not, did you maybe use a non-standard `baseQuery`? – phry Apr 12 '22 at 07:30
  • I used `fetchBaseQuery` actually the one recommended in the docs. I just see issues for queries that were rejected because of caching and all. But no-404 errors – Y M Apr 12 '22 at 07:54
  • But in the devtools, you see these as rejected actions? – phry Apr 12 '22 at 11:12

1 Answers1

0

More than a year later, I am looking into this. I think the middleware approach is ok, but you could also use a custom baseQuery for this. Your specific case seems to have other things to debug as well, but you did not provide enough information for that.

I think that the documentation for RTKQuery is wrong: isRejected is a higher order function that require thunks as arguments. This applies also to other matchers as well, such as isRejectedWithValue.

I believe that, to check for any rejected action, your middleware should be like the following, even though this is not clearly documented.

export const rtkQueryErrorLogger: Middleware = (api: MiddlewareAPI) => next => action => {
  if (isRejected()(action)) {
     console.log(action);
  }
  return next(action);
}

Remember of course also to add the middleware to the store creator.

See also the official documentation https://redux-toolkit.js.org/api/matching-utilities#isrejected

isRejected

A higher-order function that returns a type guard function that may be used to check whether an action is a 'rejected' action creator from the createAsyncThunk promise lifecycle.

isRejected usage

import { isRejected } from '@reduxjs/toolkit' import type { AnyAction
} from '@reduxjs/toolkit' import { requestThunk1, requestThunk2 } from
'@virtual/matchers'

const isARejectedAction = isRejected(requestThunk1, requestThunk2)

function handleRejectedAction(action: AnyAction) {   if
(isARejectedAction(action)) {
    // action is a rejected action dispatched by either `requestThunk1` or `requestThunk2`   } }
antoHuman
  • 159
  • 7