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

throw new Error

and I'm unable to call the

await response.json()

await response.json()

in this GET function or else the

useQuery

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?

TanStack•2y ago•

7 replies

ethical-tan

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

throw new Error

and I'm unable to call the

await response.json()

await response.json()

in this GET function or else the

useQuery

useQuery

// 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?

Retrieving body json when errors occur with useQuery

Similar Threads

Retrieving body json when errors occur with useQuery

Similar Threads

Similar Threads

Similar Threads