Can Relay work properly with Next.js SSR?

Viewed 994

I have started learning Relay by writing a new Next.js application. I have so far been following the with-relay-modern example in the Next.js repo, and it has been working just fine for fetching data from the server. However, I have now moved beyond that example by adding a mutation, and things immediately stopped working.

The mutation updater looks like this:

function updateStore(
  store: RecordSourceSelectorProxy,
  formInstanceUuid: string,
) {
  const mutation = store.getRootField("updateFormValue");
  const newFormValue = mutation?.getLinkedRecord("formValue");

  if (!newFormValue) {
    throw "Expected new form value from server";
  }

  const localFormInstance = store.get(formInstanceUuid)
  const localValueRecords = localFormInstance?.getLinkedRecords("values") || [];

  for (const record of localValueRecords) {
    if (record.getValue("partUuid") == newFormValue.getValue("partUuid")) {
      console.log("Copying fields from server provided value to local value");

      record.copyFieldsFrom(newFormValue);
    }
  }

  console.debug("New state of store:", initEnvironment().getStore().getSource())
}

All it does is inject a "value" object returned from the server into a list of value objects in a local "form" object. As you can see I am dumping the state of the store on the last line, so I can confirm that the mutation worked as expected, and the local value was modified as expected.

However, the UI doesn't refresh. I have to reload the window to see the new state.

I can't for the life of me figure out what I've done wrong, so I'm starting to wonder if the example I was following only works for fetching data. I assume it's the QueryRenderer object that is responsible for refreshing the UI when the underlying store changes, and the example doesn't use one. I also can't imagine how a QueryRenderer could be added to the example without ruining SSR.

TL;DR

Does the "with-relay-modern" example work when adding mutations, or is my issue somewhere else?


I also started a Discussion on the Next.js GitHub page about this

0 Answers
Related