Edit

Compatibility Cheatsheet

What works with what? Relay Compat ('react-relay/compat') is the most flexible. Compat components and mutations can be used by everything. Compat components can also have any kind of children.

However components using the Relay Modern API ('react-relay') and the Relay Classic API ('react-relay/classic') cannot be used with each other.

Can RelayRootContainer use:

Classic Component	Compat Component	Modern Component	Classic Mutation	Compat Mutation	Modern Mutation
Yes	Yes	No	Yes	Yes	No

Can QueryRenderer using Classic Environment (Store in react-relay/classic) use:

Classic Component	Compat Component	Modern Component	Classic Mutation	Compat Mutation	Modern Mutation
Yes	Yes	No	Yes	Yes	No

Can QueryRenderer using Modern Environment use:

Classic Component	Compat Component	Modern Component	Classic Mutation	Compat Mutation	Modern Mutation
No	Yes	Yes	No	Yes	Yes

Can React Modern Component use:

Classic Component	Compat Component	Modern Component	Classic Mutation	Compat Mutation	Modern Mutation
No	Yes	Yes	No	Yes	Yes

Can React Compat Component use:

Classic Component	Compat Component	Modern Component	Classic Mutation	Compat Mutation	Modern Mutation
Yes	Yes	Yes	Yes*	Yes	Yes

* Modern API doesn't support mutation fragments. You might have to inline the mutation fragments from your legacy mutation in the fragment of the component.

Can React Classic Component use:

Classic Component	Compat Component	Modern Component	Classic Mutation	Compat Mutation	Modern Mutation
Yes	Yes	No	Yes	Yes	No