Access Relay state without passing down props

Question

I'm learning Relay now and I was wondering if there is a way to access the state without having to pass down props. I thought that Relay used React Context, however, in all the examples they seem to be using props to pass down state instead of directly accessing the Context store. Is it possible to access state through Context? If so, is it considered bad practice?

My concern is that I will start to have a lot of props being passed down to components. In addition, it is difficult to pass down props to certain components in my application.

Answer 1

It is a bad practice to pass down Relay state using context, redux, or some other kind of external store. One of the core features of the library is making sure all components who need a piece of data get that piece, and no other pieces. This is one of the reasons Relay uses a compiler.

With Relay, developers use a declarative language called GraphQL to specify what data each component needs, but not how to get it.

[The compiler] allows components to be reasoned about in isolation, making large classes of bugs impossible

Subcomponents should use fragments. For example:

// User.tsx
interface UserProps {
  initialQueryRef: PreloadedQuery<UserQuery>
}
export default function User({ initialQueryRef }: UserProps) {
  const { user } = usePreloadedQuery(
    graphql`
      query UserQuery($uid: String!) {
        user(uid: $uid) {
          uid
          ...Avatar_fragment
          ...Biography_fragment
          # ...
        }
      }
    `,
    initialQueryRef
  )

  return (
    <div>
      <Avatar user={user} />
      <Biography user={user} />
      {/* ... */}
    </div>
  )
}

// Biography.tsx
interface BiographyProps {
  user: Biography_fragment$key // compiler generated type
}
export default function Biography({ user }: BiographyProps) {
  const { shortBio, longBio } = useFragment(
    graphql`
      fragment Biography_fragment on User {
        shortBio
        longBio
      }
    `,
    user
  )

  // ...
}

Relay will take care of updating the components that use fragments whenever the fragment data changes due to mutations, subscriptions, etc. You should never have to think about managing their state programmatically.