Skip to content

Commit 12712ad

Browse files
Update readme explaining the new dependencies option
1 parent f915fa7 commit 12712ad

File tree

1 file changed

+24
-2
lines changed

1 file changed

+24
-2
lines changed

README.md

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ Features:
66
✅ Unopinionated
77
✅ 0 dependencies
88
✅ TypeScript ready
9+
✅ Chained calls
910
✅ Allows programmatic refresh
1011

1112
## Installation
@@ -111,6 +112,27 @@ async (route, header) => {
111112

112113
- **initialValue**: the initial value for the **data** property. Defaults to undefined.
113114

115+
- **dependencies**: an array with dependencies on which the fetcher function depends on to be triggered. The array must only contain boolean values. The hook will wait until all values on the array are true before calling the fetcher function. It is useful in cases where you have to make sure of something before fetching the data, like veryfing an authentication token or chaining calls. Here is an example:
116+
117+
```javascript
118+
const UserInformationDashboard = () => {
119+
const { data: user } = useCachedFetch("users", {
120+
initialValue: null
121+
});
122+
const { data: userDetails } = useCachedFetch(`userDetails/${user.id}`, {
123+
initialValue: {
124+
name: "",
125+
posts: 0
126+
},
127+
dependencies: [user !== null]
128+
});
129+
130+
return <>Your Code</>;
131+
};
132+
```
133+
134+
In the example above the request to **userDetails:/id** will only be made once the request to **users** has been fulfilled.
135+
114136
### Usage with other HTTP clients
115137

116138
By default, the hook uses the standard fetch API to request the data, but you can use any other client you want by passing your custom fetcher function:
@@ -139,7 +161,7 @@ export default UserList;
139161

140162
### Providing global options
141163

142-
It is also possible to provide global options so that every call to **useCachedFetch** will use them. You can do so by passing the **globalOptions** prop to **CachedFetchProvider**:
164+
It is also possible to globally provide all available options so that every call to **useCachedFetch** will use them. You can do so by passing the **globalOptions** prop to **CachedFetchProvider**:
143165

144166
```javascript
145167
import React from "react";
@@ -177,7 +199,7 @@ useCachedFetch("http://my-api/lists", {
177199
});
178200
```
179201

180-
The new fetcher will be used and the headers option defined as globalOption will be kept.
202+
The new fetcher function will be used and the headers option defined as globalOption will be kept.
181203

182204
## 🤝 Contributing
183205

0 commit comments

Comments
 (0)