ClayDataProvider is a simple but very powerful component, it was designed to help you consume data easily and gives functionality of data caching, attempts, polling, network status and avoiding the thundering herd problem. It is simple and powerful because:
- Easy adoption, you can incrementally use in your application and both
ClayDataProvidercomponent and have all the functionality available.
- Simple to start, use the basics you already know or take advantage of the full set of features to get the most out of it.
- Built for data to reflect what users are doing in your application, it works perfectly for cases where data changes according to user interaction.
- Extensible, enjoy the single cache in only one source of truth and save data between navigations to be used in future interactions.
To consume data, you can work with two different ways in React, using the
<ClayDataProvider /> component or
useResource hook. We recommend that you use
useResource for cases where your component has more logic to handle data, so it decreases the complexity and eliminates logic within JSX, use
<ClayDataProvider /> for simpler cases that do not have so much logic involved in the data or when you are not familiar with hooks.
The vast majority of APIs are the same between
<ClayDataProvider />, the difference is that there is no
notifyOnNetworkStatusChange API in
useResource, you control them via the
OnNetworkStatusChange parameter when you need it.
Make attempts on a request several times when a network or server error occurs.
fetchRetry is easy to set up and is enabled by default with the
jitter setting for delays between attempts by default.
The DataProvider provides network status information for you if you want to create customizations in those statuses. If you are using
<ClayDataProvider /> you can enable this information by activating the
notifyOnNetworkStatusChangeAPI prop, once activated it will cause new renderings each time the network status changes.
Using network status with hooks is another option, it does not provide an abstraction for
networkStatus and all information is collected through the
loadingis equivalent to
networkStatus < 4
erroris equivalent to
status === 5
variables is an API for
GET requests that help satisfy whether your cache will be retrieved from storage or not, this can be useful for cases where your data is formed by user interactions such as
Autocomplete, you can still set a delay on the
fetchDelay prop to ensure that your requests are not called every time a change of input value occurs, for example.
You can cache your requests so that in new user interactions a new request is no longer necessary, by default the cache is deactivated.
The cache is guided by a policy, use the
fetchPolicy prop to enable and configure the cache according to your use case.
storageMaxSizeAPI. Each new query is equivalent to 1 size.
Avoiding thundering herd problem
delay.initial, the delay of each subsequent retry is increased exponentially, meaning it's multiplied by 2 each time. For example, if
delay.initial is 100, additional retries will occur after delays of 200, 400, 800, etc.
jitter option enabled, delays are randomized anywhere between 0ms (instant), and 2x the configured delay. This way you get the same result on average, but with random delays.
These two features combined help alleviate the thundering herd problem, by distributing load during major outages. Without these strategies, when your server comes back up it will be hit by all of your clients at once, possibly causing it to go down again.
apollo-link-retryplugin for React Apollo.
Caching data at root level
The DataProvider can be used on small components that need some data and if it is very reused by the application in other pages, it does not make sense to consult this data every time the user interacts with it in other parts of your application, you can take advantage of the root level cache, ensuring that the next user interactions in the component are with data in the cache, even if it is on other pages.
|(props: IChildrenProps) => React.ReactElement||true||It uses a render props pattern made popular by libraries like React Motion and React Router. Children as a function is required for the DataProvider to pass the props with data information, network status, refetch method and others. If this is an impediment try using the `useResource` hook.|
|boolean||false||Set to true means that network status information will be passed via `renders props` and will also cause new renderings as networkStatus changes, when false rendering does not happen again.|