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

Samuel Durante - Oct 11 '22 - - Dev Community

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!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .