react-request-hook-client

A helper react component to make HTTP requests, powered by React Hooks, insipred by Apollo GraphQL Query component. It supports both declarative and hooks ways.

Installing

npm

$ npm install --save react-request-hook-client

or Yarn

$ yarn add react-request-hook-client

Requirements

React >= 16.8.0

Get Started

See live example on CodeSandBox:

use <Request /> component

GET

import { Request, useRequest } from "react-request-hook-client";

function App() {
  return (
      <Request url="https://jsonplaceholder.typicode.com/todos/1">
        {({ data }) => {
          return <div>Get using declarative way: {JSON.stringify(data || {})}</div>;
        }}
      </Request>
  );
}

POST and others

function PostDemo() {
  return (
    <>
      <div>declarative post: </div>
      <Request
        method="POST"
        url="https://jsonplaceholder.typicode.com/posts"
        variables={{ userId: 2, title: "foo", body: "bar" }}
      >
        {(doRequest, { loading, error, data }) => {
          return (
            <>
              <div>loading: {`${loading}`}</div>
              <div>data: {JSON.stringify(data || {})}</div>
              <div>error: {JSON.stringify(error || {})}</div>
              <button
                onClick={() => {
                  doRequest();
                }}
              >
                Send request
              </button>
            </>
          );
        }}
      </Request>
    </>
  );
}

Use Hooks

GET

function GetHooksDemo() {
  const { error, loading, data } = useRequest({
    url: "https://jsonplaceholder.typicode.com/todos/2"
  });

  if (loading) return <div>loading...</div>;
  if (error) return null;
  return <div>hooks way: {JSON.stringify(data)}</div>;
}

POST and others

function PostDemoHooks() {
  const { doRequest, error, loading, data } = useRequest({
    url: "https://jsonplaceholder.typicode.com/posts",
    method: "POST",
    variables: {
      userId: 1
    }
  });

  return (
    <>
      <div>Post Hook</div>
      <div>loading: {`${loading}`}</div>
      <div>data: {JSON.stringify(data || {})}</div>
      <div>error: {JSON.stringify(error || {})}</div>
      <button
        onClick={() => {
          doRequest({ title: "foo", body: "bar" });
        }}
      >
        Send request
      </button>
    </>
  );
}

API

Request component

Props

| Props | Type | Default Value | Description | |------------|-----------------|--------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | url | String | | The HTTP request url | | method | String | GET | The HTTP request method, supports GET, POST, PUT, DELETE | | variables | Object | | Variables for the request. If it is a GET request, variables will be converted to query strings. If it is a POST/PUT/DELETE request, variables will be the request body. | | headers | Object | {"Content-Type": "application/json"} | Additional headers | | fire | Boolean | TRUE | Whether to fire the request immediately, used to finely control the time when the request will fire. | | onSuccess | (data) => Void | | Called on request successfully returned | | onError | (error) => Void | | Called on error ocurred during the request | | onComplete | () => Void | | Called on request finished, whether it succeeded or failed | |

The children passed to the <Request/> component must be a function, it has the following signature when the request method is GET:

({loading, error, data, doRequest}) => {

  return // a react component

}

POST and others:

(doRequest, {loading, error, data}) => {

  return // a react component

}

Arguments explanation:

• loading - Whether the request is pending.
• error - Error details when request encounters HTTP errors.
• data - Data returned by the server.

The function MUST return a single React component according to JSX rules, or null if no component will be returned.

useRequest hook

The useRequest hook takes the same props/arguments as the <Request/> component does, and returns the following object upon using:

  const { loading, error, data, doRequest } = useRequest({url:, variables:, ...})

In addition to specify variables at the declaration time, the doRequest function also takes an additional variables object as its argument:

<button
  onClick={() => {
    doRequest({ title: "foo", body: "bar" });
  }}
>
  Send request
</button>

It also has return values, which are:

• { success: true, response } - when the HTTP request succeeds.
• { success: false, error } - when the HTTP request fails.

These values can help users to deal with response data at the time when the event triggers.

Issues

If you have any questions or find a bug of this library, please feel free to open an issue.

License

MIT