|
14 | 14 | npm i --save @data-provider/react |
15 | 15 | ``` |
16 | 16 |
|
| 17 | +## Available hooks |
| 18 | + |
| 19 | +* [useDataProvider](#usedataproviderprovider-equalityfn) |
| 20 | +* [useData](#usedataprovider-equalityfn) |
| 21 | +* [useLoading](#useloadingprovider) |
| 22 | +* [useLoaded](#useloadedprovider) |
| 23 | +* [useError](#useerrorprovider) |
| 24 | +* [usePolling](#usepollingprovider-interval) |
| 25 | + |
| 26 | +## Available HOCs |
| 27 | + |
| 28 | +* [withDataProvider](#withdataproviderprovider-custompropertiesnamescomponent) |
| 29 | +* [withData](#withdataprovider-custompropnamecomponent) |
| 30 | +* [withLoading](#withloadingprovider-custompropnamecomponent) |
| 31 | +* [withLoaded](#withloadedprovider-custompropnamecomponent) |
| 32 | +* [withError](#witherrorprovider-custompropnamecomponent) |
| 33 | +* [withPolling](#withpollingprovider-intervalcomponent) |
| 34 | +* [withDataProviderBranch](#withdataproviderbranchprovider-custompropertiesnamescomponent-loadingcomponent-errorcomponent) |
| 35 | + |
17 | 36 | ## Hooks |
18 | 37 |
|
19 | 38 | ### `useDataProvider(provider, [equalityFn])` |
@@ -143,9 +162,30 @@ const BooksList = () => { |
143 | 162 | }; |
144 | 163 | ``` |
145 | 164 |
|
146 | | -### `useRefresh(provider)` |
| 165 | +### `usePolling(provider, [interval])` |
| 166 | + |
| 167 | +Triggers `cleanDependenciesCache` method of the provider each `interval` miliseconds while the component is "alive". It can be used in multiple components at the same time for the same provider. In that case, the used interval will be the lower one, and it will be recalculated each time a component is added or removed. |
| 168 | + |
| 169 | +This hook can also be used with [Data Provider selectors][data-provider-selectors], as it will clean the cache of all selector dependencies. So, if you are using a selector combining data from two axios providers, for example, it will result in repeating both provider http requests and recalculating the selector result every defined interval. |
| 170 | + |
| 171 | +#### Arguments |
| 172 | + |
| 173 | +* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance. |
| 174 | +* `interval` _(Object)_: Interval in miliseconds to clean the provider dependencies cache. Default is 5000. |
147 | 175 |
|
148 | | -Triggers `read` method of the `provider` first time the component is rendered, and each time its cache is cleaned. This hook is used internally by the other ones, but you could also use it separatelly. |
| 176 | +#### Example |
| 177 | + |
| 178 | +```jsx |
| 179 | +import { useData, usePolling } from "@data-provider/react"; |
| 180 | + |
| 181 | +import { books } from "../data/books"; |
| 182 | + |
| 183 | +const BooksList = () => { |
| 184 | + const data = useData(books); |
| 185 | + usePolling(books, 3000); |
| 186 | + // Do your stuff here. Books will fetched again from server every 3 seconds |
| 187 | +}; |
| 188 | +``` |
149 | 189 |
|
150 | 190 | ## HOCs |
151 | 191 |
|
@@ -328,9 +368,28 @@ const BooksList = ({ booksError }) => { |
328 | 368 | export default withError(books, "booksError")(BooksList); |
329 | 369 | ``` |
330 | 370 |
|
331 | | -### `withRefresh(provider)(Component)` |
| 371 | +### `withPolling(provider, [interval])(Component)` |
| 372 | + |
| 373 | +This High Order Component works as the hook `usePolling` described above. |
| 374 | + |
| 375 | +#### Arguments |
| 376 | + |
| 377 | +* `provider` _(Object)_: [Data Provider][data-provider] provider or selector instance, or a function as described in the [withDataProvider HOC docs](#withdataproviderprovider-custompropertiesnamescomponent) |
| 378 | +* `interval` _(Object)_: Interval in miliseconds to clean the provider dependencies cache. Default is 5000. |
| 379 | + |
| 380 | +#### Example |
332 | 381 |
|
333 | | -This High Order Component triggers the `read` method of the provider each time the provider cache is cleaned. It is used internally by the rest of HOCs, but you could also use it separately. |
| 382 | +```jsx |
| 383 | +import { withData, withPolling } from "@data-provider/react"; |
| 384 | + |
| 385 | +import { books } from "../data/books"; |
| 386 | + |
| 387 | +const BooksList = ({ data }) => { |
| 388 | + // Do your stuff here. Books data will fetched again from server every 3 seconds |
| 389 | +}; |
| 390 | + |
| 391 | +export default withPolling(books, 3000)(withData(books)(BooksList)); |
| 392 | +``` |
334 | 393 |
|
335 | 394 | #### Arguments |
336 | 395 |
|
@@ -366,6 +425,7 @@ Contributors are welcome. |
366 | 425 | Please read the [contributing guidelines](.github/CONTRIBUTING.md) and [code of conduct](.github/CODE_OF_CONDUCT.md). |
367 | 426 |
|
368 | 427 | [data-provider]: https://www.data-provider.org |
| 428 | +[data-provider-selectors]: https://www.data-provider.org/docs/api-selector |
369 | 429 | [axios]: https://github.com/axios/axios |
370 | 430 | [get-started]: https://www.data-provider.org/docs/getting-started |
371 | 431 | [basic-tutorial]: https://www.data-provider.org/docs/basics-intro |
|
0 commit comments