Function createFetchContext

Creates a React context + hook pair bound to a specific FetchEngine instance. Returns a [Provider, useHook] tuple — rename to whatever fits your domain.

Setup:

import { FetchEngine } from '@logosdx/fetch';
import { createFetchContext } from '@logosdx/react';

const api = new FetchEngine({ baseUrl: 'https://api.example.com' });

export const [ApiFetch, useApiFetch] = createFetchContext(api);

Wrap your app:

<ApiFetch>
    <App />
</ApiFetch>

Queries — auto-fetch on mount, re-fetch when path/options change:

Returns { data, loading, failure, refetch, cancel }. data is the unwrapped T. failure is one signal for "did it fail": kind: 'transport' means no response exists (abort, timeout, connection lost) — failure.error is a FetchError with .isCancelled(), .isTimeout(), etc. kind: 'http' means the server answered outside 2xx — failure.response is the resolved response (status, headers, data).

function UserList() {

    const { get } = useApiFetch();

    const { data, loading, failure, refetch } = get<User[]>('/users');

    if (loading) return <Spinner />;

    if (failure?.kind === 'transport') return <Error message={failure.error.message} />;
    if (failure?.kind === 'http') return <Error status={failure.response.status} />;

    return <ul>{data?.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Mutations — fire on demand, track loading/result/failure:

Returns { data, loading, failure, mutate, reset, cancel, called }. Starts idle (loading: false, called: false) until mutate() is called. mutate() never rejects — it resolves Promise<T> on success, or undefined on any failure (transport or HTTP); read failure for why.

function CreateComment() {

    const { post, del } = useApiFetch();

    const { mutate: submit, loading: isSubmitting, data: result, failure: submitFailure } =
        post<Comment>('/comments');
    const { mutate: remove, loading: isRemoving, failure: removeFailure } =
        del<void>('/comments/123');

    const onSubmit = async () => {

        const comment = await submit({ text: 'Hello' });

        if (!comment) {
            if (submitFailure?.kind === 'http') console.error(submitFailure.response.status);
            if (submitFailure?.kind === 'transport') console.error(submitFailure.error.message);
            return;
        }
    };

    return (
        <form onSubmit={onSubmit}>
            <button disabled={isSubmitting}>
                {isSubmitting ? 'Sending...' : 'Submit'}
            </button>
            {result && <p>Comment created: {result.id}</p>}
            {submitFailure?.kind === 'http' &&
                <p>Failed ({submitFailure.response.status})</p>}
        </form>
    );
}

Escape hatch — instance gives raw access to the FetchEngine:

const { instance } = useApiFetch();
// For imperative one-off requests in event handlers
const handleExport = async () => {
    const [res, err] = await attempt(() => instance.get('/export'));
};

Rules: get, post, put, del, and patch call React hooks internally, so they follow the same rules — call them at the top level of your component, never conditionally or in loops.