Description
We're experimenting with React-Async combined with OpenAPI-Client-Axios as a way to centralize our app's API calls into a reusable utility module, without async/await proliferating all throughout our codebase (and without having to deal with all the edge-case stuff that you guys have already covered so cleanly).
Invoking an API call with <Async> works great, both <Async.Pending> and <Async.Fulfilled> render as expected. However, I added an API call that intentionally returns an error, and while I see various browsers recognize that the XHR received HTTP 4XX or 5XX, nothing renders out of <Async.Rejected>.
The code is very simple ... maybe too simple (I'm wondering if the issue and solution might be related to #53, but I don't know enough about this infrastructure to be sure how to decide, or what to do about it yet).
<Async promiseFn={ simulateBadRequestError }>
<Async.Pending>[ loading ]</Async.Pending>
<Async.Rejected>{ error => { <> Error: { JSON.stringify(error) } </> }}</Async.Rejected>
<Async.Fulfilled>{ context => { <> Result: { JSON.stringify(context.data) } </> }}</Async.Fulfilled>
</Async>const api = new OpenAPIClientAxios({ definition: Config.apiUri });
api.init();
export async function simulateBadRequestError() {
const client = await api.getClient();
const data = await client.paths['/testing/SimulateBadRequestError'].get();
return data;
}