Overview

React Hyper Fetch is a data fetching library that implements the main features of the core library and adapts it to the React environment. It handles fetching, submitting, and queueing requests as well as their management in the system.

Together with the provided hooks, React Hyper Fetch makes maintaining and writing new functionalities faster and easier.

Note: A previously prepared command is the minimum requirement for using hooks.

---

Usage

To use hooks, we need to initialize the builder and command instances that will be consumed as properties. Take a look at the [Quick Start](/documentation/01-Getting Started/Quick%20Start.mdx) for more examples and check out our React code examples

const { data, error, loading } = useFetch(getUsers);

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

Check our react code examples

---

Helper hooks

To break down our hook setups into smaller parts, we implemented helper hooks. This enhances code readability; the idea is that the main hook returns minor helpers, which lets us segregate our logic into smaller parts. It's quite simple, as you can see in 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
});