Skip to content
Permalink
Browse files

readme update

  • Loading branch information
marcellomontemagno committed Feb 11, 2020
1 parent 0dfc14a commit 0cc88269656eb992445eb918b165947335dff3bc
Showing with 39 additions and 39 deletions.
  1. +39 −39 README.md
@@ -5,22 +5,22 @@
<br/>
UFO - Use fetch orderly
<br/>
`react-ufo` helps you handle data fetching in React with no fuss
A simple React hook to help you with data fetching
</p>

## Introduction

When updating a UI with data retrieved from a remote server a lot of things can go wrong
[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [Axios](https://www.npmjs.com/package/axios) help you fetching data but when you need to link the status of a request to your React state you are on your own.

- You will need to handle `loading` and `error` state
- You might have two or more requests depending on each other
- You might want to abort pending requests in certain conditions
- You might have to handle race conditions
Handling the UI state related to a request can be repetitive and error-prone, especially if you have to

- handle related requests within the same component
- ignore requests results after your component is unmounted
- abort requests in certain conditions
- handle race conditions

At first sight, these problems seem no big deal but things get out of control quite easily.
Taking advantage of React hooks `react-ufo` helps you deal with this complexity.

Taking advantage of React hooks `react-ufo` helps you deal with all this complexity.

## Installation

`npm install --save react-ufo`
@@ -96,6 +96,33 @@ useEffect(()=>{
this ensures that your `fetcher` will be invoked on mount and anytime `id` updates, which is usually what you want.

Here a basic example showing how to use `useFetcher` during mount/update [![Edit 2basicFetchOnMountAndUpdateExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2basicfetchonmountandupdateexample-k7e1q?fontsize=14&hidenavigation=1&theme=dark)

### Cascading fetches

Sometimes 2 requests depend on each other.

Let's say that you fetched a `todo` object containing a `userId` field and you want to use `userId` to fetch a `user` object.

Here how you can handle this use case with `useFetcher`

```js
...
const [fetchTodo, [loadingTodo, todoError, todo]] = useFetcher(todoFetcher, {loading:true})
const [fetchUser, [loadingUser, userError, user]] = useFetcher(userFetcher, {loading:true})
useEffect(()=>{
fetchTodo(todoId).then((todo)=>{
fetchUser(todo.userId)
})
},[todoId, fetchTodo, fetchUser])
...
```

Here the full example showing this use case [![Edit 4cascadingFetchesExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4cascadingfetchesexample-1148s?fontsize=14&hidenavigation=1&theme=dark)

### Ignoring a pending request

@@ -115,7 +142,7 @@ Unfortunately in order for `callback.abort()` to work properly there is some lit

`useFetcher` will take care of passing an [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) to your `fetcher` as its last argument.

In order for `callback.abort()` to work you'll need to pass the abort signal to your [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
In order for `callback.abort()` to work you'll need to pass the abort signal to your [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

Here an example showing how to enable fetch abortion on the `getTodo` `fetcher` presented earlier

@@ -132,36 +159,9 @@ If a request is marked as ignored `loading`, `error` and `data` will not be upda

Here an example showing how to abort a request [![Edit 3basicAbortFetchExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/3basicabortfetchexample-kf591?fontsize=14&hidenavigation=1&theme=dark)

Aborting a pending request is quite easy when using [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) but it can also be achieved if you are using other libraries such as [axios](https://www.npmjs.com/package/axios)

If you are wondering how to abort a request started by [axios](https://www.npmjs.com/package/axios) instead of [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) you can find an example here [![Edit abortRequestIfUsingAxiosExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/abortrequestifusingaxiosexample-fg8de?fontsize=14&hidenavigation=1&theme=dark)

### Cascading fetches

Sometimes 2 requests depend on each other.

Let's say that you fetched a `todo` object containing a `userId` field and you want to use `userId` to fetch a `user` object.

Here how you can handle this use case with `useFetcher`

```js
...
const [fetchTodo, [loadingTodo, todoError, todo]] = useFetcher(todoFetcher, {loading:true})
const [fetchUser, [loadingUser, userError, user]] = useFetcher(userFetcher, {loading:true})
useEffect(()=>{
fetchTodo(todoId).then((todo)=>{
fetchUser(todo.userId)
})
},[todoId, fetchTodo, fetchUser])
...
Aborting a pending request is quite easy when using [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) but it can also be achieved if you are using other libraries such as [axios](https://www.npmjs.com/package/axios)

```

Here the full example showing this use case [![Edit 4cascadingFetchesExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4cascadingfetchesexample-1148s?fontsize=14&hidenavigation=1&theme=dark)
If you are wondering how to abort a request started by [Axios](https://www.npmjs.com/package/axios) instead of [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) you can find an example here [![Edit abortRequestIfUsingAxiosExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/abortrequestifusingaxiosexample-fg8de?fontsize=14&hidenavigation=1&theme=dark)

### Keeping state between fetches

0 comments on commit 0cc8826

Please sign in to comment.
You can’t perform that action at this time.