Showing non-200 error details in UI

[Purus]

I am using the hook useQuery to get remote data. For some reasons, the remove server might return fail status with some error message. I am not sure how would I catch those errors and show in UI for better user experience.

    return useMutation(
        () => {
            const data = query(issueKey, formData);
            return axios
                .post(`${EP}/api/data`, data)
                .then((res) => res.data);
        }
    );

It works fine for success and failure response as I currently show generic failure response.

How should I modify my axios call and the react code to catch the error response body and show in UI?

For example, if status code is 4XX or 5XX, I want to get the response body to be shown in UI.

[ChathurangaKCD]

Both useQuery & useMutation have error property in returned result,
Whatever value thrown from query function can be accessed from error.

//fetch
  const queryResult = useQuery(
    ["GetById", val1, val2],
    (_: string, val1: string, val2: string) => {
      return Axios.get(`${url}/api/${val1}/${val2}`)
        .then((res) => res.data)
        .catch((err) => {
          if (err.response) {
            const { data, status } = err.response;
            if (status === 403) {
              throw { error: "ImportantError", status, data };
            }
          }
          throw { error: "SomeError" };
        });
    }
  );
  const { status, data, error, isError } = queryResult;

//mutation
  const [mutate, mutation] = useMutation(() => {
    return Axios.post(
      "https://api.github.com/orgs/invalidId/actions/runners/registration-token"
    )
      .then((res) => res.data)
      .catch((err) => {
        if (err.response) {
          const { data, status } = err.response;
          if (status === 403) {
           //ideally a custom error object
            throw { errorCode: "ImportantError", status, data };
          }
        }
        throw { errorCode: "SomeError" };
      });
  });
  const { status, data, error, isError } = mutation;

[Purus]

Thanks for your great example and details. It was very helpful.