schettino

react-request-hook

  "description": "Managed request calls made easy by React Hooks",

  "repository": "schettino/react-request-hook",

    "test": "react-scripts test --env=jsdom --coverage",

    "test:watch": "react-scripts test --env=jsdom",

    "predeploy": "cd example && yarn install && yarn run build",

    "deploy": "gh-pages -d example/build",

    "rollup-plugin-node-resolve": "^3.3.0",

    "rollup-plugin-peer-deps-external": "^2.2.0",

    "rollup-plugin-typescript2": "^0.17.2",

![React Request Hook](https://raw.githubusercontent.com/schettino/react-request-hook/master/other/react-request-hook.png)

> Managed, cancelable and safely typed requests.

[![Code Coverage][coverage-badge]][coverage]

[![Bundle Size][bundle-size-badge]][bundle-size]

  - [`createRequestError()`](#createrequesterror)

- [Type safety for non typescript projects](#type-safety-for-non-typescript-projects)

npm install --save react-request-hook axios

import {RequestProvider} from 'react-request-hook';

  const [user, getProfile] = useResource(api.getProfile, [props.userId]);

The useResource hook manages the request state under the hood. Its high level api allows one request to be made at time. Subsequents requests cancel the previous ones, leaving the call to be made with the most recent data available. The api is intended to be similar to `useState` and `useEffect`.

It requires a function as first argument that is just a [request config][axios-request-config] factory, and returns a tuple with the request state and a function to trigger the request call, which accepts the same arguments as the factory one.

const [comments, getComments] = useResource((id: string) => ({

The request function returns a canceler that allows you to easily cancel a request on the cleaning phase of an effect hook.

  // same as `response.data` resolved from the axios promise

  // Shortcut function to cancel a pending request

The request can also be triggered passing its arguments as dependencies to the _useResource_ hook.

By using it, you're responsible for handling the promise resolution. It's still cancel pending requests when unmounting the component.

By using it, you're responsible for handling the promise resolution. It's still canceling pending requests when unmounting the component.

  const {ready, cancel} = createRequest(props.postId);

The `request` function allows you to define the response type coming from it. It also helps on creating a good pattern on defining your api calls and the expected results. It's just a identity function that accepts the request config and returns it. Both useRequest and useResource extract the expected and annotated type definition and resolve it on the `response.data` field.

The `createRequestError` normalizes the error response. This function is used internally as well. The `isCancel` flag is returned so you don't have to call **axios.isCancel** later on the promise catch block.

  // same as `response.data`, where response is the object coming from the axios promise

  // code on the `data` field, `error.code` or `error.response.status`

## Type safety for non typescript projects

This library is entirely written in typescript, so depending on your editor you might have all the type hints out of the box. However, we also provide a payload field to be attached on the request config object, which allows you to define and use the typings for the payload of a given request. We believe that this motivates a better and clean code as we're dealing with some of the most substantial part of our app implementation.

![Type hint](https://raw.githubusercontent.com/schettino/react-request-hook/master/other/type-hint.png)

The examples folder contains a `/components` folder with different use cases, like infinite scrolling components, search input that triggers the api, and so on. It's currently a working in progress.

Thanks to @kentcdodds for making this implementation a lot easier to test. [create-react-library](https://www.npmjs.com/package/create-react-library) for the initial setup and [Grommet](https://github.com/grommet/grommet) with its great components used in the examples.

[axios-request-config]: (https://github.com/axios/axios#request-config)

[npm]: https://www.npmjs.com/package/react-request-hook

[npm-badge]: https://img.shields.io/npm/v/react-request-hook.svg

[build-badge]: https://img.shields.io/travis/schettino/react-request-hook.svg?style=flat-square

[build]: https://travis-ci.org/schettino/react-request-hook

[coverage-badge]: https://img.shields.io/codecov/c/github/schettino/react-request-hook.svg?style=flat-square

[coverage]: https://codecov.io/github/schettino/react-request-hook

[license-badge]: https://img.shields.io/npm/l/react-testing-library.svg?style=flat-square

[license]: https://github.com/kentcdodds/react-testing-library/blob/master/LICENSE

[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

[bundle-size]: https://bundlephobia.com/result?p=react-request-hook@latest

[bundle-size-badge]: https://badgen.net/bundlephobia/minzip/react-request-hook@latest

		{
		"name": "react-request-hook",
		"version": "1.0.0-alpha.3",
		"version": "1.0.0",
		"description": "Managed request calls made easy by React Hooks",
		@@ -5,0 +5,0 @@ "author": "Matheus Schettino",

		@@ -1,2 +0,2 @@
		# React Request Hook
		![React Request Hook](https://raw.githubusercontent.com/schettino/react-request-hook/master/other/react-request-hook.png)

		@@ -25,2 +25,3 @@ > Managed, cancelable and safely typed requests.
		- [Type safety for non typescript projects](#type-safety-for-non-typescript-projects)
		- [Examples](#examples)
		- [Acknowledgement](#acknowledgement)
		@@ -172,3 +173,3 @@ - [License](#license)

		By using it, you're responsible for handling the promise resolution. It's still cancel pending requests when unmounting the component.
		By using it, you're responsible for handling the promise resolution. It's still canceling pending requests when unmounting the component.

		@@ -249,4 +250,10 @@ ```tsx
		And you'll have
		![Type hint](https://raw.githubusercontent.com/schettino/react-request-hook/master/other/type-hint.png)
		<p align="center">
		<img width="600" src="https://raw.githubusercontent.com/schettino/react-request-hook/master/other/type-hint.png">
		</p>

		## Examples

		The examples folder contains a `/components` folder with different use cases, like infinite scrolling components, search input that triggers the api, and so on. It's currently a working in progress.

		## Acknowledgement
		@@ -263,3 +270,2 @@
		[axios-request-config]: (https://github.com/axios/axios#request-config)

		[npm]: https://www.npmjs.com/package/react-request-hook
		@@ -266,0 +272,0 @@ [npm-badge]: https://img.shields.io/npm/v/react-request-hook.svg

Fixed alerts

Improved metrics