State and Data Layers

// a Relay component: the fragment is the data contract; the compiler generates the type; the runtime masks
import { graphql, useFragment } from 'react-relay'
import type { PostCard_post$key } from './__generated__/PostCard_post.graphql'   // generated: exactly the fragment's shape

export function PostCard({ post }: { post: PostCard_post$key }) {                 // the prop is an opaque reference, not the data
  const data = useFragment(graphql`
    fragment PostCard_post on Post {
      id
      title
      author { name avatarUrl }
    }
  `, post)
  // data.body is a type error AND undefined at runtime: the parent may have fetched it; this component did not declare it
  return <article><img src={data.author.avatarUrl} alt="" /><h3>{data.title}</h3><span>{data.author.name}</span></article>
}

// the parent spreads the child's fragment; it never names the child's fields
export function Feed({ viewer }: { viewer: Feed_viewer$key }) {
  const data = useFragment(graphql`
    fragment Feed_viewer on Viewer {
      posts(first: 20) @connection(key: "Feed_posts") { edges { node { id ...PostCard_post } } }
    }
  `, viewer)
  return <>{data.posts.edges.map(e => <PostCard key={e.node.id} post={e.node} />)}</>
}
// the route query (compiled to a persisted id): query FeedRouteQuery { viewer { ...Feed_viewer } }
// a mutation that returns the updated Post updates every PostCard reading it, via the normalised store; @appendNode / @deleteRecord edit connections