Docs
Launch GraphOS Studio

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 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 that fetches identical data. To learn how, see

.

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 when the user hovers over a particular link (to a page that uses the data returned by the query):

When the GET_DOG completes, its result is stored in the 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

, 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
Edit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company