REACT-DECLARATIVE-FETCH

What

A Declarative Way To Make HTTP Requests in React.

Why

The process of making external API requests in a react component often repeats itself and I found myself handling the same state changes in different components to many times.
For example, showing a <Loader /> component while fetching and taking into account the different responses from the API i.e Error or Success.

How

In most cases, when making an async external call from a component you will want to account for three different phases in the request lifecycle:

1. Fetching
2. Success
3. Error

REACT-DECLARATIVE-FETCH aims to give a dead simple and declarative API for handling the different state changes in an API call.

example

npm i react-declarative-fetch

import { Fetch } from 'react-declarative-fetch';
const ImageGallery = () => {
  return (
    <Fetch url="https://www.someImageApiUrl">
      <Fetch.Error>Error while loading the images</Fetch.Error>
      <Fetch.Fetching>show loader</Fetch.Fetching>
      <Fetch.Success>
        {({ data }) => data.map(img => <Image {...img} />)}
      </Fetch.Success>
    </Fetch>
  );
};

more examples

Each of the compound components will only get rendered when the appropriate state is set, i.e when fetching <Fetch.Fetching> will get rendered and at the end of the request either <Fetch.Success> or <Fetch.Error> will get rendered.

API

Both <Fetch.Success> and <Fetch.Error> can be used as a render props and they will be invoked with the current state.
The <Fetch> component can also be used alone as a render props component and will be invoked with the current state.

Props

| Name | Type | Required | Description | | --------- | ------- | ----------------------------- | -------------------------------------------------------------------------------------------------- | | url | string | yes | the url to make the request from | | options | object | no, the default method is GET | options to pass to the request agent (i.e axios) like method, headers, etc... | | withCache | boolean | no | if present the results would be cached and would be retrieved from the cache on following requests | | delay | number | no | delay the request X amount of milliseconds |

State - render props components will be invoked with the state object

| Name | Type | Description | | ---------- | -------- | ------------------------------------------- | | fetching | boolean | Is in process of fetching the data | | success | boolean | Did the request ended successfuly | | data | object | The current request respones | | error | Error | The current request Error | | resetCache | function | function that resets the cache when invoked |

TODO

[ ] expose reset cache api outside of the component.
[ ] add examples and use cases.
[ ] move to the native fetch instead of axios.