How to handle local state when using a relay?

Question

I am working on a responsive / relay content management system. Users can create and modify articles that are stored on the server. I was wondering how best to handle the changed state of an article before saving it to the server. I can come up with several different ways to solve this problem:

1) Uncontrolled inputs

I can populate input elements with defaultValue and never save state explicitly. The DOM will be used as my repository for modified data. When the user clicks “save”, I collect all the fields, read the values ​​and create a mutation.

Pro:

• No local state processing

Contra:

• I cannot know exactly which fields have been changed, and I will need to send all the data using the mutation. Or you will need additional logic to make the difference
• Unable to update other parts of the view in response to state changes

2) Copy in local state:

I could store the modified article in the local state of the React component and use controlled input fields to synchronize it.

Pro:

• The local state could only change the fields, so diff will be easy
• Other parts of the user interface may respond to local state changes.

Contra:

• This seems like a kind of anti-pattern, because the data in the view does not come directly from the relay. Synchronization between local state and relay can be a source of errors

3) Server new local:

Just create a mutation for each change you make. The use of optimistic updates should also provide a good UX.

Pro:

• Relays are the only source of truth for data
• The state is saved on the server side, so a backup is created if the user accidentally closes the browser

Contra:

• This will require a more complex server-side implementation to handle cases when the user wants to abandon the draft, etc.
• Many mutations caused

---

Here are three ways to solve this problem that I could think of, but there are probably better ways to solve this problem.

I saw that there is a lot of discussion about how to handle local state using Relay, and a built-in solution with a future version of Relay may appear, but I need a solution that works with the current version of the relay.

Answer 1

Correct me if I am mistaken, but I believe that you are combining two problems: you are discussing the problem of storing a local state, but in fact you are concerned about the problem of conflicting changes made by two people (for example, another person is editing the same article that the current one is editing user). The reason, in my opinion, is that you are talking about a change in the requisites of the relay, which will happen only if your application will actively receive updates from the server, and there are such updates to receive.

This seems to be a kind of anti-pattern, because the data in the view does not come directly from the repeater. Synchronization between local state and relay can be a source of errors

The Relay application will not constantly synchronize with the server if you do not. Relay request and details that are passed to the component are not updated constantly. If there is a possibility of a conflict, you need to solve this problem, and this is not a relay problem, and where you store the local state will not solve this problem.

The easiest way to handle conflicts:

• Use option 2 for local state
• Provide each article with an automatically increasing version of the # that you get when you download the article for editing.
• Require mutations to edit an article to indicate the base version # of which it runs. The server must reject any mutation that has a base that is not the current version. Inform the user that there are conflicting changes, they do not work in the latest version, and you cannot allow them to be saved.

I worked on complex Relay applications, and we always relied on # 2. The Local React state is excellent, and the controlled inputs are excellent. This is not an anti-pattern, relay, or other.