Skip to content

Commit 814068c

Browse files
Update README.md
1 parent c5ba79b commit 814068c

File tree

1 file changed

+47
-4
lines changed

1 file changed

+47
-4
lines changed

hooks/useRetry/README.md

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,54 @@
33
A React hook that simplifies retrying failed service calls.
44

55
## Usage
6-
`useRetry` is designed to be used in tandem with [useLoadData](../useLoadData/). This hook will trigger `retry` from errored [retry response objects](../../types/RetryResponse.ts), and only those responses.
6+
`useRetry` exposes a wrapped version of [useLoadData](../useLoadData/) that retries any and all errored [retry response objects](../../types/RetryResponse), and only those responses created, from that exposed version of _useLoadData_.
7+
78

89

910
```Typescript
1011
import React from 'react';
11-
import {useLoadData, useRetry} from 'react-hooks';
12+
import {useRetry} from '@optum/react-hooks';
1213

14+
export const MyComponent = (props) => {
15+
const {useLoadData, retry} = useRetry();
16+
const loadedContent = useLoadData(fetchContent);
17+
const loadedUserProfile = useLoadData(fetchUserProfile);
18+
const loadedResults = useLoadData(fetchResults);
19+
if(
20+
loadedContent.isInProgress ||
21+
loadedUserProfile.isInProgress ||
22+
loadedResults.IsInProgress
23+
) {
24+
return <div>Loading your page</div>
25+
} else if(
26+
loadedContent.isError ||
27+
loadedUserProfile.isError ||
28+
loadedResults.isError
29+
) {
30+
return <button onClick={retry}>Retry</button>
31+
}
32+
else {
33+
return ...
34+
}
35+
}
36+
```
37+
38+
In addition, a list of any `useLoadData` responses can be passed as arguments (not just responses returned by the wrapped version of `useLoadData`) and when the `retry` function is called, any failed responses will be retried.
39+
40+
```Typescript
41+
import React from 'react';
42+
import {useLoadData, useRetry} from '@optum/react-hooks';
1343

1444
export const MyComponent = (props) => {
1545
const loadedContent = useLoadData(fetchContent);
1646
const loadedUserProfile = useLoadData(fetchUserProfile);
1747
const loadedResults = useLoadData(fetchResults);
1848

19-
const retry = useRetry(loadedContent, loadedUserProfile, loadedResults);
49+
const {retry} = useRetry(
50+
loadedContent,
51+
loadedUserProfile,
52+
loadedResults
53+
);
2054

2155
if(
2256
loadedContent.isInProgress ||
@@ -37,6 +71,7 @@ export const MyComponent = (props) => {
3771
}
3872
```
3973

74+
4075
## API
4176

4277
`useRetry` takes the following arguments:
@@ -46,4 +81,12 @@ export const MyComponent = (props) => {
4681
| `...apis` | `RetryResponse[]` | any number of retry responses returned from instances of `useLoadData` |
4782

4883

49-
The return value of `useRetry` is a function `() => void` that triggers the **retry** property of errored RetryResponses.
84+
The return value from `useLoadData` contains the following properties:
85+
86+
| Name | Type | Description |
87+
| -------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
88+
| `useLoadData` | `typeof useLoadData` | Modified version of [useLoadData]('../useLoadData'). |
89+
| `retry` | `() => void` | Retries any retry response created by the _useLoadData_ exposed with this hook in addition to retrying errored retry responses passsed into this hook. |
90+
| `isMaxRetry` | `boolean` | True if any retry response either passed or created via the useLoadData exposed in this hook has reached it's _isMaxRetry_ |
91+
92+

0 commit comments

Comments
 (0)