You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+8-8
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,6 @@
1
1
React Refetch
2
2
=========================
3
+
3
4
A simple, declarative, and composable way to fetch data for React components.
4
5
5
6

@@ -100,7 +101,7 @@ connect(props => ({
100
101
}))(UsersList)
101
102
```
102
103
103
-
Setting `force: true` should be avoid if at all possible because it could result in extraneous data fetching and rendering of the component. Try to use the default comparison or custom `comparison` option instead.
104
+
Setting `force: true` should be avoided if at all possible because it could result in extraneous data fetching and rendering of the component. Try to use the default comparison or custom `comparison` option instead.
104
105
105
106
## Automatic Refreshing
106
107
@@ -113,7 +114,7 @@ connect(props => ({
113
114
}))(Profile)
114
115
```
115
116
116
-
When refreshing, the `PromiseState` will be the same as a the previous `fulfilled` state, but with the `refreshing` attribute set. That is, `pending` will remain unset and the existing `value` will be left in tact. When the refresh completes, `refreshing` will be unset and the `value` will be updated with the latest data. If the refresh is rejected, the `PromiseState` will move into a `rejected` and not attempt to refresh again.
117
+
When refreshing, the `PromiseState` will be the same as the previous `fulfilled` state, but with the `refreshing` attribute set. That is, `pending` will remain unset and the existing `value` will be left intact. When the refresh completes, `refreshing` will be unset and the `value` will be updated with the latest data. If the refresh is rejected, the `PromiseState` will move into a `rejected` and not attempt to refresh again.
117
118
118
119
## Fetch Functions
119
120
@@ -191,7 +192,7 @@ Note, the example above sets `force: true` and `refreshing: true` on the request
191
192
192
193
### Posting + Refreshing Data
193
194
194
-
The two examples above can be combined to post data to the server and refresh an existing `PromiseState`. This is a common pattern when a responding to a user action to update a resource and reflect that update in the component. For example, if `PATCH /users/:user_id` responds with the updated user, it can be used to overwrite the existing `userFetch` when the user updates her name:
195
+
The two examples above can be combined to post data to the server and refresh an existing `PromiseState`. This is a common pattern when responding to a user action to update a resource and reflect that update in the component. For example, if `PATCH /users/:user_id` responds with the updated user, it can be used to overwrite the existing `userFetch` when the user updates her name:
195
196
196
197
```jsx
197
198
connect(props=> ({
@@ -331,7 +332,7 @@ Note, this form of transformation is similar to what is possible on the `Promise
331
332
332
333
**Identity requests can also be provided a `Promise` (or any "thenable") or a `Function`.**
333
334
If `value` is a `Promise`, the `PromiseState` will be `pending` until the `Promise` is resolved. This can be helpful for asynchronous, non-fetch operations (e.g. file i/o) that want to use a similar pattern as fetch operations.
334
-
If `value` is a `Function`, it will be evaluated with no arguments and its return value will be used instead, as in cases described above. The `Function` will be only be called when `comparison` changes. This can be helpful for cases where you want to provide an identify request, but it is expensive to evaluate. By wrapping it in a function, it is only evaluated when something changes.
335
+
If `value` is a `Function`, it will be evaluated with no arguments and its return value will be used instead, as in cases described above. The `Function` will only be called when `comparison` changes. This can be helpful for cases where you want to provide an identify request, but it is expensive to evaluate. By wrapping it in a function, it is only evaluated when something changes.
When using this feature, make sure to read the [`fetch` API and interface documentation](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and all related topics. Notably, you need to keep in mind that the `body` of a `Response` can _only be consumed once_, so if you need to read it in your custom `fetch`, you also need to recreate a brand new `Response` (or a `.clone()` of the original one if you're not modifying the body) so React Refetch can work properly.
496
+
When using this feature, make sure to read the [`fetch` API and interface documentation](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and all related topics. Notably, you need to keep in mind that the `body` of a `Response` can *only be consumed once*, so if you need to read it in your custom `fetch`, you also need to recreate a brand new `Response` (or a `.clone()` of the original one if you're not modifying the body) so React Refetch can work properly.
496
497
497
-
This is an _advanced feature_. Use existing declarative functionality wherever possible. Customise `buildRequest` or `handleResponse` if these can work instead. Please be aware that changing the `fetch` (or `Request`) implementation could conflict with built-in current or future functionality.
498
+
This is an *advanced feature*. Use existing declarative functionality wherever possible. Customise `buildRequest` or `handleResponse` if these can work instead. Please be aware that changing the `fetch` (or `Request`) implementation could conflict with built-in current or future functionality.
If you are using React Refetch in a project that is using TypeScript, this library ships with type definitions.
651
651
652
-
Below is example connected component in TypeScript. Note how there is both an `OuterProps` and `InnerProps`. The `OuterProp` are the props the component receives from the outside. In this example, the `OuterProps` would just be `userId: string` the caller is expected to pass in (e.g. `<UserWidget userId="user-123"/>`). The `InnerProps` are the `PromiseState` props that the `connect()` function injects into the component when fetching data. Since the `InnerProps` include the `OuterProps`, they are defined as `InnerProps extends OuterProps` and then the component itself `extends React.Component<InnerProps>`. This allows the component to have access to both the `userId: string` and `userFetch: PromiseState<User>` internally. However, the `connect` function returns a component with only the `OuterProps` (e.g. `React.Component<OuterProps>`) so callers only need to pass in `userId: string`.
652
+
Below is an example connected component in TypeScript. Note how there is both an `OuterProps` and `InnerProps`. The `OuterProp` are the props the component receives from the outside. In this example, the `OuterProps` would just be `userId: string` the caller is expected to pass in (e.g. `<UserWidget userId="user-123"/>`). The `InnerProps` are the `PromiseState` props that the `connect()` function injects into the component when fetching data. Since the `InnerProps` include the `OuterProps`, they are defined as `InnerProps extends OuterProps` and then the component itself `extends React.Component<InnerProps>`. This allows the component to have access to both the `userId: string` and `userFetch: PromiseState<User>` internally. However, the `connect` function returns a component with only the `OuterProps` (e.g. `React.Component<OuterProps>`) so callers only need to pass in `userId: string`.
0 commit comments