Relay/Apollo anti-pattern

There are a lot of advice to have dumb and smart components when using pure React, or React with Redux/Mobx.

However this can be an anti-pattern sometimes when using React with Relay.

Relay/Apollo concept

Relay/Apollo solves data fetching problems colocating data requirements to views/components that rely on them.

Anti-pattern problems

When you have a Relay component that describes are the data needed for itself and for their children, this will make harder to refactor your components later on.

Take these components as example:

In the example above, UserList declares all the requirements of UserList and also the requirements of UserRow. This looks like not a big deal, but this will cause 2 problems:

• if we decide that UserRow also needs profile picture you need to refactor both UserList and UserRow.
• if you remove one field required by UserRow from UserList fragment this will break your application in runtime

How to solve this?

Create a fragmentContainer for UserRow, and only ask for what UserList needs in there fragment.

The refactor would be like this:

Final Thoughts

Relay concept was the missing piece of React ecosystem. If you are not using it, you should.

Want to learn how to avoid this anti-pattern? Send a PR to solve this issue https://github.com/sibelius/ReactNavigationRelayModern/issues/17

Newsletter

Subscribe to my newsletter for new content https://sibelius.substack.com/