Learn Relay/
← 0204 →

03 - useFragment

Learn how to use useFragment to let each component declare its own data dependencies.

Exercise

  • Refactor App to render the <Post /> component for each post
  • Move the Post type selections (content) inside Post.tsx as a Post_post fragment
  • Consume the fragment with useFragment and spread it in AppQuery with ...Post_post

Extras

  • render the post author name (author { name })
Next: usePaginationFragment →
Loading editor…
localhost:7500 · in-browser GraphQL server
Checks verify your solution against the running app.
  • ○Post.tsx declares a Post_post fragment with useFragment
  • ○AppQuery spreads ...Post_post
  • ○App renders the <Post /> component
  • ○Posts content is rendered