Bug of the week - Relay Modern Mutations don't work in Compat Mode
2017-11-08 von Hannes

Bug facts

Related issues

Description

In one of our projects we are currently migrating from relay classic to relay modern. The guys at facebook have layed out a relativly painless migration path using relays compat mode. With compat we can rewrite existing classic containers in our app one at a time.

That's why we thought it is a good idea to rewrite relay mutations as well. One of the main selling points of relay modern is the simpler mutation api. Why not start directly, right?! So we created a relay modern mutation as described in the official documentation.

In short relay modern provides a commitMutation method to execute a new mutation:

import { commitMutation } from 'react-relay';

commitMutation(
  // the relay environment
  environment,
  // the mutation config
  {
    mutation, // the mutation to run
    variables, // mutation variables
    ...optimisticUpdater, // function that updates the relay store optimistically
    updater, // function that updates the relay store based on server data
  },
);

Pretty straightforward and actually more intuitive! But when we used our new shiny modern mutation the UI DID NOT UPDATE 🔥 😤 🔥 We could see that the GraphQL request was performed as expected and the correct data was returned. Nevertheless the client state/relay store was not updated afterwards.

What was happening?

It took us some time to figure this out, since the relay documentation isn't really helping here... It seems, that optimisticUpdater and updater methods are not called when running in compat mode. This actually makes sense, because we are running in some kind of hybrid relay classic store that does not support "direct" manipulation as introduced in relay modern.

This means no modern style mutations in compat mode for now...

Solution

We will ONLY use classic style mutations since they are working fine with modern style containers in compat mode. After we have migrated every classic container, we will migrate all mutations at once and switch to modern entirely.

About using configs instead of updater function

We are aware that it should be possible to use modern mutations using the configs option. This should work similar to the relay classic mutation api with configs. Since we are using a lot of FIELDS_CHANGE configs in our app and these do not seem to be present in modern implementation this is currently not an option for us.

Closer

As you know, bug hunting is hard and can be error prone itself. If you have feedback or know stuff better than we do, feel free to leave us feedback 🤞

🐞 Cheers 🐞