async-fetch

A React hook for async fetch requests with built-in state management, cancellation, and polling.

Installation

npm install async-fetch
# or
yarn add async-fetch

Usage

import useAsyncFetch from "async-fetch";

function App() {
  const { pending, data, error, sendRequest, cancelRequest } = useAsyncFetch(
    "https://jsonplaceholder.typicode.com/todos/1",
  );

  return (
    <React.Fragment>
      <button onClick={sendRequest}>Send request</button>
      <button onClick={cancelRequest} disabled={!pending}>
        Cancel request
      </button>
      {pending
        ? "Loading..."
        : data
        ? JSON.stringify(data)
        : error
        ? JSON.stringify(error)
        : ""}
    </React.Fragment>
  );
}

Auto-fetch on mount

By default the hook fires on mount. Set auto: false to disable:

const { pending, data, sendRequest } = useAsyncFetch(url, { auto: false });

POST with JSON body

const { pending, data, error } = useAsyncFetch("/api/submit", {
  method: "POST",
  data: { name: "foo" },
});

Polling

const { data } = useAsyncFetch("/api/status", { poll: 5000 });

Callbacks

useAsyncFetch("/api/user/1", {
  onStart: () => console.log("started"),
  onSuccess: (data) => console.log(data),
  onFail: (error) => console.error(error),
  onFinish: () => console.log("finished"),
});

Cancel on demand

const { cancelRequest } = useAsyncFetch("/api/user/1");
<button onClick={cancelRequest}>Cancel</button>;

Request options

The minimum requirement is a URL string as the first argument. The second argument accepts the following options — anything else is passed directly to the underlying fetch call.

| Option | Type | Default | Description | | ---------------- | ----------------------------------------------------------- | -------- | ---------------------------------------------------- | | initialPending | boolean | false | Initial state for pending | | initialError | E | | Initial state for error | | initialData | T | | Initial state for data | | auto | boolean | true | Whether to auto-send the request on mount | | poll | number | | Milliseconds between polling requests | | timeout | number | 30000 | Milliseconds before the request is cancelled | | ignoreRequest | boolean | | Skips sending the request when true | | ignoreCleanup | boolean | | Skips cancelling the request on unmount when true | | query | object | | Key-value pairs appended to the URL as search params | | params | object | | Key-value pairs appended to the URL as search params | | data | unknown | | Value to send as the request body | | parser | "json" \| "text" \| "blob" \| "formData" \| "arrayBuffer" | "json" | Method used to parse the response | | onStart | () => void | | Called when the request starts | | onSuccess | (data: T) => void | | Called with the response data on success | | onFail | (error: E) => void | | Called with the error on failure | | onFinish | () => void | | Called when the request finishes |

Response

| Property | Type | Description | | --------------- | --------------------- | ----------------------------- | | pending | boolean | Whether the request is active | | error | E | The response error | | data | T | The response data | | sendRequest | () => Promise<void> | Sends the request manually | | cancelRequest | () => void | Cancels the active request |

License

MIT