Apollo Client Prefetching in React

This lesson is all about prefetching data. It is another UX technique that can be deployed to the optimistic UI technique you used earlier. We will implement the prefetching data feature for the list of issues, but feel free to implement it for other data fetching later as your exercise.

Data Prefetching

When your application renders for the first time, there are no issues fetched, so no issues are rendered. The user has to toggle the filter button to fetch open issues and do it again to fetch closed issues. The third click will hide the list of issues again. The goal of this lesson is to prefetch the next bulk of issues when the user hovers the filter button. For instance, when the issues are still hidden and the user hovers the filter button, the issues with the open state are prefetched in the background. When the user clicks the button, there is no waiting time, because the issues with the open state are already there. The same scenario applies to the transition from open to closed issues.

To prepare this behavior, we’ll split out the filter button as its own component in the src/Issue/IssueList/index.js file: