DEV Community 👩‍💻👨‍💻

Samuel Durante for Woovi

Posted on

How to use the Relay fetch policy to ensure fast rendering?

One of the main tools of Woovi is Relay. Relay is a GraphQL Client designed for high performance on any scale. When performing one of your main operations, query, we use a hook called useLazyLoadQuery, this hook has a property called fetchPolicy, which defines whether the query will be made from the local cache (we call it "store") or whether it should be made from a network request (we call it "network").

The following definitions fetchPolicy are:

store-or-network

store-or-network is the default value, if data exists in the store, and is not obsolete, it won't do a network request, otherwise, it will do a network request.

store-or-network

Example: We can use it in high-flow places to save network requests. Consequently avoiding unnecessary requests.

store-and-network

store-and-network will use the data of the store, and always do a network request without making regardless.

store-and-network

Example: We can imagine the Instagram home, we can render outdated data while fetching new data.

network-only

network-only always will search the data making a network request.

network-only

Example: We need to render the balance of the customer, we can't render a balance out of date, so always we will make a new network request without considering the store.

store-only

store-only always will search the data of the store.

store-only

Example: We use store-only when we assume that this data already exists in the store, and we will not need the refetch.

If you want to work with us, we are hiring!

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠