How to update Relay store without pushing to server

Question

I have a form in my React/Relay app that I am using to modify some fields. I don't want to send a server update every time a new letter is typed into an input. How can I use Relay to support the application state without always pushing to the server? Having read through most of the Relay docs it seems to me that I have to basically copy the Relay state either to the local state of my form or to some other Flux store, deal with changing it in there, and then commit it into Relay. That seems like a lot of extra work though just to keep a local state.

Answer 1

Relay current version is a glue between graphQL and React, it only handles the data from server.

---

...it seems to me that I have to basically copy the Relay state either to the local state of my form...

I fail to see the problem. The way React works, requires you to store state for the whole form or for each input separately anyway.

If you add edit functionality (render form and fetch data to populate inputs for user to change them), all the Relay data is available as this.props.RelayFragmentName on form level anyway.

You pass it down to inputs where you assign it to state and circle is complete. You could also feed inputs directly from props (without assigning data to input state) and change form state from inputs via methods.

Now when user makes the changes and confirms it, you'll just collect all the state again to make a mutation.

I see it as a complete circle that is basically unbreakable if all the defaults are set.

---

Relay has imperative API to get, add or update cache directly but it's relatively dirty and rarely used (especially for local state). It's used for features like WebSockets where you want to push updates from server to client and update cache manually.

Current Relay is meant to work with server data only. Relay 2 has a local cache but it's not out yet.

---

If we're talking about different things or you could use some code samples, let me know.

Answer 2

In relay modern you can use commitLocalUpdate to do that.

For example

onEmailChange = (email) => {
  commitLocalUpdate(environment, (proxy) => {
    const userProxy = proxy.get(this.props.user.__id);
    userProxy.setValue(email, 'email');
  });
}