Easily handle http requests for React and React Native with React Http Request Handler (RH2) a React library
Tags: react, reactnative, javascript, tutorial
Published: 2022-08-18 00:12:00

React Http Request Handler (RH2) is a library that aims to simplify HTTP calls in a React application. One of its assets, you can use it for a web application (ReactJs) or for a mobile application (React Native).
Another advantage of RH2, it gets rid of the effects that are necessary when you want to make HTTP requests. How is it possible to do without? Rh2 implements it internally, it removes this task from you.
The calls to the services that you will need to make will be made using the Axios library, it is used to make the requests, its varied settings encouraged us to adopt it.To use RH2, we have created hooks, you just have to pass them the Axios configuration as a parameter, as well as additional parameters that are optional. These, to help you make the most of the features of RH2.

The rest of this article is based on the documentation: There are references to classes, you can find the details in the link below.

{% embed https://www.npmjs.com/package/react-http-request-handler %}

To start we need to install the library with the following command : 
`npm install react-http-request-handler`

The version of the library while writing this article is version 1.1.1

> In the project sources, there is a folder named example in which you can see configuration examples (be careful, it’s a bit of a mess…).

```react
import React from 'react';
import { Rh2InitializationParameter, Rh2Initializer } from "react-http-request-handler";
import App from "./App";

const initSettings: Rh2InitializationParameter = {
    debugMode: true
};

<Rh2Initializer rh2Settings={initSettings}>
    <App />
</Rh2Initializer>

```

In this example there are two important elements. The initSettings property is worth an object of type Rh2InitializationParameter with the activation of debug mode as a parameter. This mode will display logs to help understand if something is not going as expected.
Other properties are available for initialization. For example, you can give a method to execute in case of an error in your HTTP request (500, 400, etc…), an example is present in the documentation.

Then, initSettings is passed as input to the Rh2Initializer component. If you do not want to pass any configuration, this is quite possible. You will simply have to wrap your application with the component without passing any parameters.

To understand the interest of this phase, it is good to know what it is for. Here we have an example with the configuration which is practically the smallest.
If you go a little further, you will notice that you can configure several settings so that the library generates as many [Axios](https://github.com/axios/axios) instances as you need. These instances will be identified with a key, this to allow you to execute an HTTP request with the instance of your choice, if none is defined to execute the request, don’t panic. We have made sure that the configuration is as simple as possible, so, if the key is not filled in, we take the first available instance (the order of the instances is equivalent to the order of the information given during the configuration).
In our example, we haven’t configured anything about this, so RH2 will initialize a default instance.

To finish on this subject, it is interesting to know the following information. Although [react-http-request-handler](https://www.npmjs.com/package/react-http-request-handler) is there to help you manage the execution of HTTP requests yourself, you can recover the Axios instances that have been generated. This can be useful if we haven’t handled a case that you need or if you need to create a custom interceptor.
The service to recover the instances is **rh2ConfigService**, it is possible to recover all the instances or just one with its key.

To continue, I will give you an example of use. To keep it very simple, I will not complete the configuration presented above. This means that RH2 will use an instance generated by default.

```react
import { AxiosRequestConfig, Rh2AxiosConfig, rh2AxiosConfigService } from "react-http-request-handler";

const axiosConfig: AxiosRequestConfig = {
    url: 'https://jsonplaceholder.typicode.com/todos',
    method: 'GET' 
};
const configACharger: Rh2AxiosConfig = {
    label: 'TEST',
    axiosRequestConfig: axiosConfig
};

rh2AxiosConfigService.addConfigAxios(configACharger);
```

This example shows how to add a new configuration to the library. Not all configs need to be stored. In our current case, it is to introduce you to the use of the [useRh2WithName](andler#preloaded-hook) hook, it allows you to execute a request via its label. In case you don’t want to save the configuration, there is the [useRh2WithParameters](https://www.npmjs.com/package/react-http-request-handler#hooks-without-preloading) hook.

This example consists of three parts, first of all, we configure the information relating to the request that we are going to want to execute, the url and the type of request.
Then, this configuration is combined with that of **RH2**, we have entered a label named TEST, this to identify this configuration, you can add as many as you need.
Our type **Rh2AxiosConfig** being of a class named **Rh2EffectAxiosConfigHandler**, among the possible parameters, there is the handling of the request if it ends in error or with success. If you have defined an error configuration when initializing the library via **Rh2InitializationParameter**, and we had redefined a configuration for this request, this one would be used first. This was an example, other very useful properties are to be discovered via the documentation.
In the last line we can read the service used to add the configuration.

```react
import { useRh2WithName } from "react-http-request-handler";

const testWithName = useRh2WithName('TEST');
console.log(testWithName);
```

In a React component, you still have to call our [useRh2WithName](https://www.npmjs.com/package/react-http-request-handler#preloaded-hook) hook with its label to execute the request to jsonplaceholder. Below we will describe what will be displayed in the log.

![The different statuses of a request used with RH2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl6d6zvv24w93dy6oy5h.png)

Above we have three different logs, these are three different states of our previously configured query.
The first, our component loads for the first time, all statuses are initialized to false because no processing has started.
The second log shows us that the component has read the [useRh2WithName](https://www.npmjs.com/package/react-http-request-handler#preloaded-hook) hook call, the request is loading.
The last one allows to see that the request is completed successfully, in the data property is contained the result of the invoked request. When you configure the queries, you can order to return only the result of this one (default value) or all the information with the **onlyResult** property. An example is below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbbv7z6zqeozxnpw2fcs.png)

This article aims to present the [React Http Request Handler (RH2)](https://www.npmjs.com/package/react-http-request-handler) library, the example presented was as simple as possible in terms of configuration. It is possible to enter multiple settings. If you have any problems, you want to have other features or you want to share something else, you are welcome in the community. The discussion forum is here -> [Discussion](https://github.com/Lunotte/react-http-request-handler/discussions/29)