Skip to main content

Overview

React Hyper Fetch is a data fetching library which implements the core features of the core library and adapting it to the React environment. It handles everything from fetching, submitting, queueing the requests and their management in the system. Together with the provided hooks, maintaining and writing new functionalities becomes trivial.

The minimum requirement to use hooks is to have a previously prepared command.


Usage

To use hooks, we need to initialize builder and the commands instances that will be then consumed as properties. Take a look at the Quick Start.

const { data, error, loading } = useFetch(getUsers);
const { submit, data, error, submitting } = useSubmit(postLogin);

Check our react code examples


Helper hooks

Code readability has always been an important factor for us, so to break down our hook setups into smaller parts, we implemented helper hooks. The concept is that the main hook returns minor helpers, thanks to which we can segregate our logic into smaller parts. It's quite simple as on the example below.

const {
data,
error,
loading,
onRequestStart,
onResponseStart,
onSuccess,
onError,
onDownloadProgress,
onUploadProgress,
onFinished,
onAbort,
onOffline,
} = useFetch(getUsers);

onRequestStart(({ details, command }) => {
// Do something on query start
});

onResponseStart(({ response, details, command }) => {
// Do something when query starts returning response
});

onSuccess(({ response, details, command }) => {
// Do something on query success
});

onError(({ response, details, command }) => {
// Do something on query fail
});

onAbort(({ response, details, command }) => {
// Do something on query cancellation
});

onOffline(({ response, details, command }) => {
// Do something when query goes stale while offline
});

onFinished(({ response, details, command }) => {
// Do something on query finished (success or false)
});

onUploadProgress(({ progress, sizeLeft, timeLeft, total, loaded }) => {
// Do something on upload
});

onDownloadProgress(({ progress, sizeLeft, timeLeft, total, loaded }) => {
// Do something on download
});