Join us from October 8-10 in New York City to learn the latest tips, trends, and news about GraphQL Federation and API platform engineering.Join us for GraphQL Summit 2024 in NYC
Docs
Start for Free

Improving performance in Apollo Client


Redirecting to cached data

In some cases, a might request data that's already present in the cache thanks to a different query that already ran. For example, your UI might have both a list view and a detail view with queries that fetch the same from a particular object.

In cases like these, you can avoid sending your server a followup query that fetches identical data. To learn how, see Cache redirects.

Prefetching data

Prefetching involves executing queries for data before that data needs to be rendered. It helps your application's UI feel more responsive to the user.

Most of the time, prefetching involves for data as soon as you can guess that a user will probably need it.

For example, this code snippet calls client.query to execute a query when the user hovers over a particular link (to a page that uses the data returned by the query):

When the GET_DOG query completes, its result is stored in the Apollo Client cache. This means that if the user then clicks the link, the dog's detail page can immediately populate that data from the cache, which feels instantaneous to the user.

In addition to a mouse hover, here are some other suggestions for situations when prefetching can be helpful:

  • During a multi-step flow (such as a wizard), you can preload each next step's data during each current step.
  • If your app's analytics indicate a frequent transition between two particular views, you can use prefetching to optimize for that path.
  • If a region of a page has multiple tabs or slides (such as a carousel), you can preload data for some or all of them to make transitions feel snappier.

A special form of prefetching is store hydration from the server, so you might also consider hydrating more data than is actually needed for the first page load to make other interactions faster.

Feel free to submit a PR with suggestions for other preloading opportunities!

Previous
Reducing bundle size
Next
Optimistic mutation results
Rate articleRateEdit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc., d/b/a Apollo GraphQL.

Privacy Policy

Company