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
* first go
* cleanup
* cleanup
* updating documentation
* added docs for conditional auto-managed state
* cleanup
* docs cleanup
* cleanup
* link to contributions.md
* bettering docs
* added `skip` option, `skip` tests, fixed bug with `responseType`
* forgot to hit save
* tests for not overwriting every instance of useFetch global options
* tests for path and route without a /
* cache cleanup
* updating docs
* removing conditional auto-managed state from this PR
* forgot to remove skip from types.ts
<detailsopen><summary><b>Basic Usage Managed State <code>useFetch</code></b></summary>
105
104
106
105
If the last argument of `useFetch` is not a dependency array `[]`, then it will not fire until you call one of the http methods like `get`, `post`, etc.
<details open><summary><b>Basic Usage Auto-Managed State <code>useFetch</code></b></summary>
151
150
152
-
This fetch is run `onMount/componentDidMount`. The last argument `[]` means it will run `onMount`. If you pass it a variable like `[someVariable]`, it will run `onMount` and again whenever `someVariable` changes values (aka `onUpdate`). **If no method is specified, GET is the default**
151
+
This fetch is run `onMount/componentDidMount`. The last argument `[]` means it will run `onMount`. If you pass it a variable like `[someVariable]`, it will run `onMount` and again whenever `someVariable` changes values (aka `onUpdate`). If no method is specified, GET is the default.
153
152
154
153
```js
155
154
importuseFetchfrom'use-http'
156
155
157
156
functionTodos() {
158
-
// accepts all `fetch` options
159
-
constoptions= {
160
-
data: [], // setting default for `data` as array instead of undefined
161
-
}
162
-
163
-
const { loading, error, data } =useFetch('https://example.com/todos', options, []) // onMount (GET by default)
157
+
const { loading, error, data } =useFetch('https://example.com/todos', {
158
+
// these options accept all native `fetch` options
159
+
data: [] // defaults the `data` to an array instead of `undefined`
160
+
}, []) // <- this [] means it will fire onMount (GET by default)
164
161
165
162
return (
166
163
<>
@@ -179,52 +176,15 @@ function Todos() {
179
176
180
177
</details>
181
178
182
-
183
-
<details open><summary><b>Basic Usage (auto managed state) with <code>Provider</code></b></summary>
@@ -853,7 +807,6 @@ This is exactly what you would pass to the normal js `fetch`, with a little extr
853
807
| `onError` | Runs when the request get's an error. If retrying, it is only called on the last retry attempt. | empty function |
854
808
| `onNewData` | Merges the current data with the incoming data. Great for pagination. | `(curr, new) =>new` |
855
809
| `onTimeout` | Called when the request times out. | empty function |
856
-
| `path` | When using a global `url` set in the `Provider`, this is useful for adding onto it | `''` |
857
810
| `persist` | Persists data for the duration of `cacheLife`. If `cacheLife` is not set it defaults to 24h. Currently only available in Browser. | `false` |
858
811
| `perPage` | Stops making more requests if there is no more data to fetch. (i.e. if we have 25 todos, and the perPage is 10, after fetching 2 times, we will have 20 todos. The last 5 tells us we don't have any more to fetch because it's less than 10) For pagination. | `0` |
859
812
| `responseType` | This will determine how the `data` field is set. If you put `json` then it will try to parse it as JSON. If you set it as an array, it will attempt to parse the `response` in the order of the types you put in the array. Read about why we don't put `formData` in the defaults [in the yellow Note part here](https://developer.mozilla.org/en-US/docs/Web/API/Body/formData). | `['json', 'text', 'blob', 'readableStream']` |
@@ -862,7 +815,6 @@ This is exactly what you would pass to the normal js `fetch`, with a little extr
862
815
| `retryOn` | You can retry on certain http status codes or have custom logic to decide whether to retry or not via a function. Make sure `retries >0` otherwise it won't retry. | `[]` |
| `timeout` | The request will be aborted/cancelled after this amount of time. This is also the interval at which `retries` will be made at. **in milliseconds**. If set to `0`, it will not timeout except for browser defaults. | `0` |
865
-
| `url` | Allows you to set a base path so relative paths can be used for each request :) | empty string |
866
818
867
819
```jsx
868
820
constoptions= {
@@ -906,9 +858,6 @@ const options = {
906
858
// called when the request times out
907
859
onTimeout: () => {},
908
860
909
-
// if you have a global `url` set up, this is how you can add to it
910
-
path:'/path/to/your/api',
911
-
912
861
// this will tell useFetch not to run the request if the list doesn't haveMore. (pagination)
913
862
// i.e. if the last page fetched was < 15, don't run the request again
914
863
perPage:15,
@@ -957,9 +906,6 @@ const options = {
957
906
958
907
// amount of time before the request get's canceled/aborted
959
908
timeout:10000,
960
-
961
-
// used to be `baseUrl`. You can set your URL this way instead of as the 1st argument
962
-
url:'https://example.com',
963
909
}
964
910
965
911
useFetch(options)
@@ -1001,6 +947,9 @@ If you have feature requests, [submit an issue][1] to let us know what you would
1001
947
Todos
1002
948
------
1003
949
950
+
- [ ] prefetching
951
+
- [ ] global cache state management
952
+
- [ ] optimistic updates
1004
953
- [ ] `persist` support for React Native
1005
954
- [ ] better loading state management. When using only 1 useFetch in a component and we use
1006
955
`Promise.all([get('/todos/1'), get('/todos/2')])` then don't have a loading true,
0 commit comments