Member-only story
Dependent and Conditional Data Fetching With useSWR
Advanced data fetching patterns made easy with useSWR
When it comes to building complex React applications, useSWR is a blessing. It takes away all the complexity of storing and caching your API responses. Most of my applications no longer need global state management.
Today I would like to discuss two advanced (and related) use cases for data fetching with useSWR. Dependent fetching, and conditional fetching.
Some of the advantages of dependent and conditional fetching include: simplifying application structure, reducing database lookups and improving application performance.
What’s dependent fetching?
Dependent fetching happens when you have a fetch request that relies on the fetching of other data before it can begin. SWR takes care of all the complexity surrounding this problem. If the dependent data is not available in the cache, it will make that request before fetching your data.
As you can see in the above example, we return null from our useSWR’s key function when we haven’t yet fetched our user settings. Once we have fetched our user settings, then we will fetch our project data using the required user id.
What’s conditional fetching?
Conditional fetching happens when you have a fetch request that you only want to execute under certain circumstances.
Here’s an example of when conditional fetching can be helpful. Below we have a useOrder custom hook that makes an API call to get the order information only if an id is provided.
Remember that useSWR’s first argument is the cache key. If you return null, throw an error, or return a falsy value, then useSWR will not preform the fetch.
