Learn Relay/
← 0608 →

07 - useRefetchableFragment

Learn how to refetch any fragment using useRefetchableFragment.

Exercise

  • modify comment/PostComments.tsx to use useRefetchableFragment and make the Show older button refetch older comments
  • add @refetchable(queryName: "PostCommentsRefetchQuery") to the PostComments_post fragment, so the Relay compiler generates the refetch query for you
  • use the useTransition hook to show a loading indicator if the network is slow (try increasing the latency of the server)

Extras

  • add a button to refetch new comments

Code Helpers

  • useTransition

useTransition hook let you "suspend" based on an action, usually a data fetch

const [isPending, startTransition] = useTransition();
  • refetch
refetch({ id: post.id, first: 1, after: pageInfo.endCursor }, { fetchPolicy: 'store-or-network' });
Next: useSubscription →
Loading editor…
localhost:7500 · in-browser GraphQL server
Checks verify your solution against the running app.
  • ○PostComments uses useRefetchableFragment
  • ○PostComments_post fragment is @refetchable
  • ○useTransition is used to refetch
  • ○Clicking "Show older" refetches the fragment and renders more comments