Skip to content

<Async.Rejected> not rendering when API returns error status #317

@MV10

Description

@MV10

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;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions