react-request-hook-client v0.1.0-beta1

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

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