15 - Fetch policies & refreshing (bonus)

Relay keeps every record it has fetched in its normalized store. The fetchPolicy decides if a query should be read from the store, from the network, or both.

Open the Network tab and switch between the Feed and About tabs: every time the Feed mounts, FeedQuery is sent again, even though the posts are already in the store.

Exercise

Change the fetchPolicy of FeedQuery so going back to the Feed renders from the store without a network request
Implement the Refresh button: it should send FeedQuery to the server again and render new posts
- use a fetchKey that changes on every refresh, together with fetchPolicy: 'network-only'
- keep the current posts on the screen while refreshing (wrap the update in startTransition)

Extras

try store-and-network: what do you see on the Network tab when you go back to the Feed?
try store-only and reload the app
show the isPending state of the transition

Next: The Relay store: local updates →

auto run

Loading editor…

localhost:7500 · in-browser GraphQL server

latency

Checks verify your solution against the running app.

○The Feed renders the posts
○Going back to the Feed renders from the store, without a new request
○Refresh sends FeedQuery again and keeps the posts visible while loading