Prefetching is an easy way to make your applications UI feel faster. You can use mouse events to predict the data that could be needed. This is powerful and works perfectly on the browser, but can not be applied to a mobile device.
One solution for improving the UI experience would be the usage of fragments to preload more data in a query, but loading huge amounts of data (that you probably never show to the user) is expensive.
Another solution would be to split huge queries into two smaller queries:
- The first one could load data which is already in the store. This means that it can be displayed instantly.
- The second query could load data which is not in the store yet and must be fetched from the server first.
This solution gives you the benefit of not fetching too much data, as well as the possibility to show some part of the views data before the server responds.
Lets say you have the following schema:
And you have two Views:
- Series Overview: List of all Series with their description and cover
- Series DetailView: Detail View of a Series with its description, cover and a list of episodes
The query for the Series Overview would look like the following:
The queries for the Series DetailView would look like this:
By adding a custom resolver for the
oneSeries field (and having dataIdFromObject function which normalizes the cache), the data can be resolved instantly from the store without a server round trip.
A component for the second view that implements the two queries could look like this:
Unfortunately if the user would now visit the second view without ever visiting the first view this would result in two network requests (since the data for the first query is not in the store yet). By using a
HttpBatchLink those two queries can be send to the server in one network request.