optimistic-gold

Retrieving body json when errors occur with useQuery

When my server responds with an error, it sometimes passes in an error message that is useful to the user. I want to pass that through to my React code but can't seem to do it, because I need to throw new Error and I'm unable to call the await response.json() in this GET function or else the useQuery stops working, because it expects the promise as the return value. If I throw the error and then modify the error after the fact with the response body, my react code doesnt update. I'm in a pickle. my fetch code:

// Dead simple GET request
export const GET = async (endpoint: string, params?: Record<string, any>) => {
  const url = params ? `${endpoint}?${buildQueryString(params)}` : endpoint;
  const response = await fetch(url, init);

  if (!response.ok || response.status === 204) {
    // I want to passs in the await response.json() here to show my users
    throw new HTTPError(response);
  }
  return response.json();
};

// Dead simple GET request
export const GET = async (endpoint: string, params?: Record<string, any>) => {
  const url = params ? `${endpoint}?${buildQueryString(params)}` : endpoint;
  const response = await fetch(url, init);

  if (!response.ok || response.status === 204) {
    // I want to passs in the await response.json() here to show my users
    throw new HTTPError(response);
  }
  return response.json();
};

my query

const { isFetching, data, error } = useQuery<IGridData>(moduleQueryOptions());

const { isFetching, data, error } = useQuery<IGridData>(moduleQueryOptions());

my react code

if (error) {
   <div className="flex h-full w-full flex-col items-center justify-center px-4 text-lg text-red-500">
      {RemapErrorMessage[error?.code] ?? error.message}
    </div>

if (error) {
   <div className="flex h-full w-full flex-col items-center justify-center px-4 text-lg text-red-500">
      {RemapErrorMessage[error?.code] ?? error.message}
    </div>

but I want error.message to be the server response in some cases. Any advice?

5 Replies

exotic-emerald•14mo ago

not sure I understand the problem. Can you explain why this wouldn't work ?

if (!response.ok || response.status === 204) {
  // I want to passs in the await response.json() here to show my users
  const json = await response.json()
  throw new HTTPError(response, json);
}

if (!response.ok || response.status === 204) {
  // I want to passs in the await response.json() here to show my users
  const json = await response.json()
  throw new HTTPError(response, json);
}

optimistic-goldOP•14mo ago

const {data,error} = useQuery(queryOptions) console.log(111, data, error) this shows all those undefined/null values. the final line, after all the react is done rendering, is in the fetch call for the code you gave me: console.log(json)

optimistic-goldOP•14mo ago

For some reason, the error is created and thrown too late in the render lifecycle Maybe I just don't throw and handle errors in data :Think:

exotic-emerald•14mo ago

there are 3 retries per default ... when data is undefined and error is null, the query is likely just in pending state

optimistic-goldOP•14mo ago

ah it is pending, my bad! I had a enabled: on the queryOptions that was computed to false

Gaming

Programming

Retrieving body json when errors occur with useQuery

Did you find this page helpful?