RFC: Adopt Relay Hooks in favor of container-based APIs for managing GraphQL data

Proposal

Adopt Relay Hooks in favor of the container-based APIs for fetching and managing GraphQL data in Eigen (Relay Hooks Migration Guide).

Reasoning

1. Using Relay Hooks will require less code and has less indirections than the equivalent container-based solution.
2. The Hooks API gives us the ability to configure more granular fetch policies and comes with an improved TypeScript coverage (according to the Relay documentation).
3. By extracting queries it will be easy to import them in other places of the app which can for example be used for our query prefetching implementation.
4. The Relay team suggests using the hooks API and has removed examples using the old container-based APIs in the documentation.
5. Using Relay Hooks will make it easier for engineers to rely on the official documentation.
6. The new usePreloadedQuery hook can be used to implement the “render-as-you-fetch” pattern to make data available faster.

Exceptions

The old container-based APIs are still fully supported in all new Relay versions to this point and even can be mixed with the new Relay hooks API. This means we can incrementally adopt the new API and don’t need to convert already existing components.

The old container-based APIs are still fully supported in all released Relay versions and can even be mixed with the new Relay Hooks API. This means that we can introduce the new API gradually and do not have to convert already existing components.

Additional Context

After a first attempt to use Relay hooks with the relay-hooks library which was not fully compatible with Relay’s QueryRenderer, we realized that it was not possible to combine the container-based APIs from Relay and the hooks from the unofficial relay-hooks library without using nested query renders. With the new official Relay hooks API, this is no longer an issue.

As soon as other clients upgrade Relay to a version that supports Relay hooks, this RFC can be applied to these projects as well.

“Introducing Relay Hooks” Blog Post

How is this RFC resolved?

We’ll consider this RFC approved if 50% of the engineering team actively approves of this change or there are no major objections that require. Add a 👍 or 👎 reaction to this proposal to vote.

Next Steps

In case of approval, we will start updating all Relay-related documentation and encourage engineers to use the new Relay hooks API for all new components in Eigen.

Relay Hooks Migration Guide

Co-authored by @MounirDhahri

[olerichter00]

This is a very good question. Maybe this chapter from the React docs can explain what problems functional components and hooks try to solve.

There is also a post from the Relay blog that gives an overview of the advantages of the new Relay Hooks API and explains why the Relay team is moving in this direction.

[araujobarret]

That’s going to help also when you want to debug with React Dev Tools, less HOC is a better tree view from that point of view 👍