@@ -73,6 +73,7 @@ Features
73
73
- Provider to set default ` url ` and ` options `
74
74
- Request/response interceptors <!-- https://github.com/alex-cory/use-http#user-content-interceptors-->
75
75
- React Native support
76
+ - Aborts/Cancels pending http requests when a component unmounts
76
77
77
78
Usage
78
79
-----
@@ -741,13 +742,37 @@ Todos
741
742
retryOnError: false ,
742
743
743
744
refreshWhenHidden: false ,
745
+
746
+ // this will allow you to merge the data the way you would like
747
+ paginate : (currData , newData ) => {
748
+ return [... currData, ... newData]
749
+ },
744
750
})
745
751
` ` `
746
752
- resources
747
753
- [retryOn/retryDelay (fetch-retry)](https://www.npmjs.com/package/fetch-retry#example-retry-on-503-service-unavailable)
748
754
- [retryDelay (react-query)](https://github.com/tannerlinsley/react-query)
749
755
- [zeit's swr](https://github.com/zeit/swr)
750
-
756
+ - [ ] potential syntax for pagination
757
+ ` ` ` js
758
+ const App = () => {
759
+ const [page , setPage ] = useState (1 )
760
+ const { data , loading } = useFetch ({
761
+ onMount: true ,
762
+ onUpdate: [page],
763
+ path: ` /todos?page=${ page} &pageSize=15` ,
764
+ paginate : (currData , newData ) => [... currData, ... neweData],
765
+ data: []
766
+ })
767
+
768
+ return (
769
+ <>
770
+ {data .map (item => < div key= {item .id }> {item .name }< / div> }
771
+ < button onClick= {() => setPage (page + 1 )}> Load More< / button>
772
+ < / >
773
+ )
774
+ }
775
+ ` ` `
751
776
- [ ] potential option ideas for ` GraphQL`
752
777
` ` ` jsx
753
778
const request = useQuery ({ onMount: true })` your graphql query`
0 commit comments