CODEWITHSUNDEEP
reactjsaxiosreact-query
JonasLevin
JonasLevin

Reputation: 2099

React Query get error status code in global onError handler

When creating the queryClient I want to create a global onError handler that refreshes my access token when the error response code is 401. But I don't know how the status code is accessible on the returned error in the onError handler.

Below is my global onError handler and I only need to access the response code in the if statement to refresh my token at the appropriate time.

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: async (error, query) => {
      // How to get status code fo error
      if (error.status === 401) {
        console.log("Refreshing Token");
        await api.get("/api/refresh-token");
        queryClient.refetchQueries(query.queryKey);
      }
    },
  }),
});

Upvotes: 9

Views: 31040

Answers (4)

mostafa
mostafa

Reputation: 478

Get help from typescript. For example if you're using Axios to send your requests just set the error type to AxiosError then you can see possible options in the error object.

const {data} = useQuery(['request_key'], async () => await axios.get(),
{
  onError: (err: AxiosError) => {
    if(err.response?.status === 401) {
      console.log('unauthorized')
    }
  }
})

Upvotes: 1

Katherine Lorenzo
Katherine Lorenzo

Reputation: 19

Error type is "unknown", you need to map this type. I am using fetch to do the requests and can map the error as "Response" object. If you need to consult the content of de error, could print with JSON.stringfy.

  queryCache: new QueryCache({
onError: (error) => {
  // JSON.stringify(error) if you are not secure and need to see the content, could print the error in strinfy
  const response = error as Response
  console.log('---------------------------------')
  console.log(response.status) // 401
  console.log(response.type) // default
  console.log(response.ok) // false
  console.log('---------------------------------')
}})

Upvotes: 0

TkDodo
TkDodo

Reputation: 28843

The error is just whatever the rejected Promise has created, so it depends on how you do the actual data fetching.

If it's axios, it will likely be an AxiosError, so the status code should be available there.

If it's fetch, then it depends on how you transform your erroneous status code to a failed Promise, because fetch doesn't do that per default. If it's just:

if (!response.ok) {
  throw new Error("no ok")
}

then you don't have information about the status code at all, because you've not included it in the Error.

All in all, this is out of react-queries hands, because it is agnostic about how data fetching is done.

Upvotes: 4

Jeshken
Jeshken

Reputation: 265

You should get it by using error.request.status.

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: async (error, query) => {
      // How to get status code fo error
      if (error.request.status === 401) {
        console.log("Refreshing Token");
        await api.get("/api/refresh-token");
        queryClient.refetchQueries(query.queryKey);
      }
    },
  }),
});

Upvotes: 10

Related Questions