baseQueryWithReauth example, responding with status: 'PARSING_ERROR'

[TanMy21]

trying the example of baseQueryWithReauth, I am facing a problem when I am calling the refresh endpoint, the result = await baseQuery, part returns error: SyntaxError: Unexpected token 'u', "unauthorized" is not valid JSON` and status: 'PARSING_ERROR', originalStatus: 403, what am I doing wrong?

import {
  BaseQueryFn,
  FetchArgs,
  FetchBaseQueryError,
  createApi,
  fetchBaseQuery,
} from "@reduxjs/toolkit/query/react";
import { RootState } from "../store";
import { setCredentials, logOut } from "../slices/authSlice";
 

const baseQuery = fetchBaseQuery({
  baseUrl: "http://localhost:8686",
  credentials: "include",
  prepareHeaders: (headers, { getState }) => {
    const token = (getState() as RootState).auth.token;
    
    if (token) {
      headers.set("authorization", `Bearer ${token}`);
    }

     
    return headers;
  },
});

const baseQueryWithReauth: BaseQueryFn<
  string | FetchArgs,
  unknown,
  FetchBaseQueryError
> = async (args, api, extraOptions) => {
 

  let result = await baseQuery(args, api, extraOptions);
  console.log(result.error);
  // If you want, handle other status codes, too
  if (result?.error?.status === 403) {
 
    // send refresh token to get new access token
    const refreshResult = await baseQuery("/refresh", api, extraOptions);
 
    if (refreshResult?.data) {
      // store the new token
      api.dispatch(setCredentials(refreshResult?.data));

      // retry original query with new access token
      result = await baseQuery(args, api, extraOptions);
    } else {
      if (refreshResult?.error?.status === 403) {
        (refreshResult.error.data as { message: string }).message =
          "Your login has expired. ";
      }
      return refreshResult;
    }
  }

  return result;
};

export const apiSlice = createApi({
  reducerPath: "api",
  baseQuery: baseQueryWithReauth,
  tagTypes: ["User"],
  endpoints: () => ({}),
});

[phryneas]

Your server does not valid JSON, but fetchBaseQuery defaults to parsing the response as JSON.

A clean solution would be to have your server return { status: "unauthorized" } instead of unauthorized.

If that's not an option, but your server at least sends back a valid content-type, you could set responseHandler: 'content-type' as an option to fetchBaseQuery.

[TanMy21]

Thank you for replying, you are correct issue was at the backend, I changed the error code block and had forgotten to make it JSON.