Propagate request's response to be able to read status codes, and more

[konsalex]

openapi-fetch version

openapi-fetch

Description

Currently in the docs it says:

onError does not handle error responses with 4xx or 5xx HTTP status codes, since these are considered "successful" responses but with a bad status code. In these cases you need to check the response's status property or ok() method via the onResponse callback.

The issue with using react-query alongside openapi-ts + openapi-fetch that I see is that it seems impossible expect if I miss something to grab the response code.

The usage pattern would be:

 const { mutateAsync, isPending: isInviting } = useMutation("post", "/api/async-operation");


const handler = async () => {
  try {
     const res = await mutateAsync(...);
  } catch(error){
    // Here error code should be able to be read if it was Fetch error
   console.log(error) // Error just ends up being the body of the response and nothing else
  }
}

I believe from other issues #2257 #2231 and maybe more.

Reproduction

Expected result

Have the fetch's error response propagated if there is an error thrown.

Extra

• I’m willing to open a PR (see CONTRIBUTING.md)

[dannydi12]

I believe you're supposed to throw an error from within the fetch client so it can bubble up and let react-query react to it and pass it along into onError. Here's how I have mine set up:

export default function useApiClient() {
  const fetchClient = createFetchClient<paths>({
    baseUrl: import.meta.env.VITE_MERCHANT_API_URL,
    credentials: "include",
  });

  fetchClient.use({
    async onResponse({ response }) {
      if (!response.ok) {
        throw new FetchError("FetchError", response, response.json());
      }
      return response;
    },
  });

  const $api = createClient(fetchClient);

  return $api;
}

/// later on... in another file

const { mutateAsync, isPending, error } = $api.useMutation(
    "post",
    "/api/auth/login",
    {
      onSuccess: (data) => {
        navigate(ROUTES.DASHBOARD);
      },
      onError: (error) => {
          setFormError("Invalid email or password");
      },
    }
  );