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
retryOn, retryDelay, enhancements, and bugfixes/docs updates (#218)
* init
* fix merge conflicts
* wip
* c
* docs
* docs cleanup
* docs cleanup
* retryOn & retryDelay with values and functions are implemented
* docs cleanup
* added boilerplate tests, fixed types, alphabetize options
* alphabetize useFetch options
* fixing current tests
* added tests, fixed bugs, put todos in for error tests (issue with react-hooks-testing-library for testing errors)
* alphabetizing options in docs
* added tests
* updated package.json deps, fixed console hack, got testing working for console.error
* adding codepen examples to readme
* cleanup types, makeError
* test for no content-type: application/json on post with FormData
* fixed pagination test, added tests for request rejections
* fix lint errors
* fixing tests, updating docs
* testing to see if it centers browser support
* nope, it does not
* Update README.md
* Update README.md
* only 1 rerender when pulling from cache, memoized `response` so it doesnt cause infinite loop when used as dependency
* small bug fix
* fixing suspense tests
In this example you can see how `retryOn` will retry on a status code of `305`, or if we choose the `retryOn()` function, it returns a boolean to decide if we will retry. With `retryDelay` we can either have a fixed delay, or a dynamic one by using `retryDelay()`. Make sure `retries` is set to at minimum `1` otherwise it won't retry the request. If `retries >0` without `retryOn` then by default we always retry if there's an error or if `!response.ok`. If `retryOn: [400]` and `retries >0` then we only retry on a response status of `400`, not on any generic network error.
583
+
584
+
```js
585
+
importuseFetchfrom'use-http'
586
+
587
+
constTestRetry= () => {
588
+
const { response, get } =useFetch('https://httpbin.org/status/305', {
589
+
// make sure `retries` is set otherwise it won't retry
590
+
retries:1,
591
+
retryOn: [305],
592
+
// OR
593
+
retryOn: ({ attempt, error, response }) => {
594
+
// returns true or false to determine whether to retry
| `cachePolicy` | These will be the same ones as Apollo's [fetch policies](https://www.apollographql.com/docs/react/api/react-apollo/#optionsfetchpolicy). Possible values are `cache-and-network`, `network-only`, `cache-only`, `no-cache`, `cache-first`. Currently only supports **`cache-first`** or **`no-cache`** | `cache-first` |
738
778
| `cacheLife` | After a successful cache update, that cache data will become stale after this duration | `0` |
739
-
| `url` | Allows you to set a base path so relative paths can be used for each request :) | empty string |
740
-
| `onNewData` | Merges the current data with the incoming data. Great for pagination. | `(curr, new) =>new` |
741
-
| `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` |
742
-
| `onAbort` | Runs when the request is aborted. | empty function |
743
-
| `onTimeout` | Called when the request times out. | empty function |
744
-
| `retries` | When a request fails or times out, retry the request this many times. By default it will not retry. | `0` |
745
-
| `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** | `30000` </br> (30 seconds) |
779
+
| `cachePolicy` | These will be the same ones as Apollo's [fetch policies](https://www.apollographql.com/docs/react/api/react-apollo/#optionsfetchpolicy). Possible values are `cache-and-network`, `network-only`, `cache-only`, `no-cache`, `cache-first`. Currently only supports **`cache-first`** or **`no-cache`** | `cache-first` |
746
780
| `data` | Allows you to set a default value for `data` | `undefined` |
747
-
| `loading` | Allows you to set default value for `loading` | `false` unless the last argument of `useFetch` is `[]` |
748
781
| `interceptors.request` | Allows you to do something before an http request is sent out. Useful for authentication if you need to refresh tokens a lot. | `undefined` |
749
782
| `interceptors.response` | Allows you to do something after an http response is recieved. Useful for something like camelCasing the keys of the response. | `undefined` |
783
+
| `loading` | Allows you to set default value for `loading` | `false` unless the last argument of `useFetch` is `[]` |
784
+
| `onAbort` | Runs when the request is aborted. | empty function |
785
+
| `onNewData` | Merges the current data with the incoming data. Great for pagination. | `(curr, new) =>new` |
786
+
| `onTimeout` | Called when the request times out. | empty function |
787
+
| `path` | When using a global `url` set in the `Provider`, this is useful for adding onto it | `''` |
750
788
| `persist` | Persists data for the duration of `cacheLife`. If `cacheLife` is not set it defaults to 24h. Currently only available in Browser. | `false` |
789
+
| `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` |
790
+
| `retries` | When a request fails or times out, retry the request this many times. By default it will not retry. | `0` |
791
+
| `retryDelay` | You can retry with certain intervals i.e. 30 seconds `30000` or with custom logic (i.e. to increase retry intervals). | `1000` |
792
+
| `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` |
795
+
| `url` | Allows you to set a base path so relative paths can be used for each request :) | empty string |
751
796
752
797
```jsx
753
798
constoptions= {
754
799
// accepts all `fetch` options such as headers, method, etc.
755
-
756
-
//enables React Suspense mode
757
-
suspense:true, // defaults to `false`
800
+
801
+
//The time in milliseconds that cache data remains fresh.
802
+
cacheLife:0,
758
803
759
804
// Cache responses to improve speed and reduce amount of requests
760
805
// Only one request to the same endpoint will be initiated unless cacheLife expires for 'cache-first'.
761
806
cachePolicy:'cache-first'// 'no-cache'
807
+
808
+
// set's the default for the `data` field
809
+
data: [],
762
810
763
-
// The time in milliseconds that cache data remains fresh.
764
-
cacheLife:0,
765
-
766
-
// Allows caching to persist after page refresh. Only supported in the Browser currently.
767
-
persist:false,
811
+
// typically, `interceptors` would be added as an option to the `<Provider />`
812
+
interceptors: {
813
+
request:async (options, url, path, route) => { // `async` is not required
814
+
return options // returning the `options` is important
815
+
},
816
+
response:async (response) => {
817
+
// note: `response.data` is equivalent to `await response.json()`
818
+
return response // returning the `response` is important
819
+
}
820
+
},
768
821
769
-
// used to be `baseUrl`. You can set your URL this way instead of as the 1st argument
770
-
url:'https://example.com',
771
-
772
-
// called when the request times out
773
-
onTimeout: () => {},
822
+
// set's the default for `loading` field
823
+
loading:false,
774
824
775
825
// called when aborting the request
776
826
onAbort: () => {},
777
827
778
-
// this will allow you to merge the data however you choose. Used for Pagination
828
+
// this will allow you to merge the `data` for pagination.
779
829
onNewData: (currData, newData) => {
780
830
return [...currData, ...newData]
781
831
},
782
832
833
+
// called when the request times out
834
+
onTimeout: () => {},
835
+
836
+
// if you have a global `url` set up, this is how you can add to it
837
+
path:'/path/to/your/api',
838
+
783
839
// this will tell useFetch not to run the request if the list doesn't haveMore. (pagination)
784
840
// i.e. if the last page fetched was < 15, don't run the request again
785
841
perPage:15,
786
842
843
+
// Allows caching to persist after page refresh. Only supported in the Browser currently.
844
+
persist:false,
845
+
787
846
// amount of times it should retry before erroring out
788
847
retries:3,
848
+
849
+
// The time between retries
850
+
retryDelay:10000,
851
+
// OR
852
+
// Can be a function which is used if we want change the time in between each retry
0 commit comments