Requesting unnecessary data
At times, we inadvertently over-fetch data, not realizing it could be cached more efficiently or that it may not be relevant for the user type. Effective caching is essential for any website or mobile app to ensure faster load times and alleviate server load. Here are some common strategies to avoid over-fetching:
Set appropriate TTL (Time to Live) values.
Define fetch policies and directives (specific to GraphQL).
Cache data at the edge, utilizing CDNs.
Cache common data models, such as asset information and user information, on the client side.
Add eligibility checks for product features.
Implement memoization for React components wherever possible.
Let’s look at some examples of requesting unnecessary data:
Example 1: There may be a feature in the app that only UK users are eligible for, but we do not fetch data conditionally. A check for the user's country before fetching data is helpful in avoiding making unnecessary requests.
GraphQL provides directives like @skip and @include which help with requesting data conditionally.
Example 2: There are certain pieces of information that do not change often, like the user's profile information (name, country, native currency). On a financial app like Coinbase, country, and currency information are very important. But fetching them on all screens is not ideal. Instead, a better caching/ storage strategy can be implemented to reduce additional calls to backend systems and underlying databases.
Example 3: We display a list of assets in multiple places across our applications. But rarely do we need to show ~300 assets at once. In such cases, proper pagination can break queries into pages and avoid fetching all the asset data at once, reducing load on backend systems and improving latency of requests.