Easily handle http requests for React and React Native with React Http Request Handler (RH2) a React library

Lunotte — Thu, 18 Aug 2022 00:12:00 +0000

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.

react-http-request-handler - npm

This React library using customized hooks is aimed to help users handling HTTP requests. The request and its trigger are simply configured, then executed by Axios. Optional parameters can also be configured depending on the web client needs. For example :. Latest version: 1.1.1, last published: 21 hours ago. Start using react-http-request-handler in your project by running `npm i react-http-request-handler`. There are no other projects in the npm registry using react-http-request-handler.

npmjs.com

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…).

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 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 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.

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 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 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.

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 hook with its label to execute the request to jsonplaceholder. Below we will describe what will be displayed in the log.

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 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.

This article aims to present the React Http Request Handler (RH2) 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

DEV Community: Lunotte

Easily handle http requests for React and React Native with React Http Request Handler (RH2) a React library

react-http-request-handler - npm