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 ComponentCompat ComponentModern ComponentClassic MutationCompat MutationModern Mutation
YesYesNoYesYesNo

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

Classic ComponentCompat ComponentModern ComponentClassic MutationCompat MutationModern Mutation
YesYesNoYesYesNo

Can QueryRenderer using Modern Environment use: #

Classic ComponentCompat ComponentModern ComponentClassic MutationCompat MutationModern Mutation
NoYesYesNoYesYes

Can React Modern Component use: #

Classic ComponentCompat ComponentModern ComponentClassic MutationCompat MutationModern Mutation
NoYesYesNoYesYes

Can React Compat Component use: #

Classic ComponentCompat ComponentModern ComponentClassic MutationCompat MutationModern Mutation
YesYesYesYes*YesYes

* 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 ComponentCompat ComponentModern ComponentClassic MutationCompat MutationModern Mutation
YesYesNoYesYesNo