02

Every component declares its own data

Each component below sits next to a GraphQL fragment listing exactly the fields it renders. Parents spread their children's fragments without knowing what's inside them. Relay's data masking enforces this at runtime: a component can only read the fields it asked for.
Fetching with Relay…
  • why it mattersDelete a field from a child's fragment and nothing else changes. Nobody has to hunt down which query fetches it, because the fragment is the query.
  • why it mattersMasking means a parent can't come to depend on data its child fetched. Refactors stay local, and unused fields can be deleted safely.
  • why it mattersAuthorLine is reused by posts and comments. Its fragment travels with it, so every screen that renders it fetches the right fields.