[RFC] New Dependency: `relay-hooks`

New Dependency

Name: relay-hooks

URL: https://github.com/relay-tools/relay-hooks

Motivation

We use relay with react-relay already, and it works great. We use createFragmentContainer and QueryRenderer to make our components.

We already use hooks if a bunch of places and we are moving towards them more and more with new code.

relay-hooks is the bridge of these two “worlds”. It provides hooks like useFragment and useQuery that replace the functions I mentioned earlier. This makes our components cleaner. We create a component and use hooks to connect it with relay, rather than having relay create and manage all that for us.

Look at this:

export const ViewingRoomQueryRenderer: React.FC<{ viewingRoomID: string }> = ({ viewingRoomID }) => {
  return (
    <QueryRenderer<ViewingRoomQuery>
      environment={defaultEnvironment}
      query={graphql`
        query ViewingRoomQuery($viewingRoomID: ID!) {
          viewingRoom(id: $viewingRoomID) {
            ...ViewingRoom_viewingRoom
          }
        }
      `}
      cacheConfig={{ force: true }}
      variables={{
        viewingRoomID,
      }}
      render={renderWithLoadProgress(ViewingRoomFragmentContainer)}
    />
  )
}

where our component is basically a relay component that we customize and adjust using the props.

Now look at this:

const query = graphql`
  query ViewingRoomQuery($viewingRoomID: ID!) {
    viewingRoom(id: $viewingRoomID) {
      ...ViewingRoom_viewingRoom
    }
  }
`

export const ViewingRoomQueryRenderer: React.FC<{ viewingRoomID: string }> = ({ viewingRoomID }) => {
  const { props, error } = useQuery(query, { viewingRoomID }, { networkCacheConfig: { force: true } })


  if (props && props.viewingRoom) {
    return <ViewingRoomFragmentContainer viewingRoom={props.viewingRoom} />
  }
  if (error) {
    throw error
  }

  return <LoadingScreen />
}

where our component is actually our code, and we control the flow from what we get from the hook.

The biggest changes here are that environment={defaultEnvironment} is not part of the component any more, it is now a Context from RelayEnvironmentProvider that we add when registering the screens here, and that we don’t need to use the render prop to have loading animations and placeholders, we can now just render the actual loading or placeholder components, so instead of render={renderWithLoadProgress(ViewingRoomFragmentContainer)} we can just use return <LoadingScreen /> at the bottom of our component.

Of course, adding this dependency does not mean we will rewrite all the relay components to use hooks, but it makes it possible to start using the relay hooks.

Check List

• Have you read over the source code?
• Has had a release in the last year, or looks done and stable?
• Could you fit this codebase in your head after reading the source?
• Is this the stand-out obvious answer to a particular domain problem?
• Do you expect your team to be the only people who know about this dependency?
• Is this obviously being used in production by the maintainers? Is it battle-tested?
• Does our bundle already include a (transitive) dependency that solves the problem and could we use that instead?
• Do you feel well versed in the domain of this dependency and/or could you maintain it if that needs to become an option?

Alternatives

N/A

Notes

This was already added in this PR while I was trying to make pagination work for the Viewing Room list, and it made my life easier. I added it as a test and it ended up helping. You can see it used here for useQuery and here for usePagination.

I’m sorry for making the RFC after the fact.

[pvinis]

We did try it out with matt, importing from react-relay/hooks. Some were missing, some args were different, and most places seem to suggest relay-hooks is the package to go, until they are officially provided.

[pvinis]

Resolution

We agree to add it. Thanks everyone for the feedback.

Level of Support

2: Positive feedback.

Next Steps

It’s already added.