React Package 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 request is the minimum requirement for using hooks.

info

This package provide hooks for both: core and sockets subpackages.

---

Usage

To use hooks, we need to initialize the client and request instances that will be consumed as properties. Take a look at the Quick Start 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, request }) => {
  // Do something on query start
});

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

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

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

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

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

onFinished(({ response, details, request }) => {
  // 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
});