Apollo GraphQL - Multiple components sharing the same mutation

Question

I am using react-apollo and creating an app that needs to sync the entire local data store of the application once every X seconds.

So essentially, imagine <input1 /> and <input2 /> both need to be synced to the server periodically.

<App>
   <input1 />
   <input2 />
</App>

• Which component should GraphQL wrap in order to achieve the sync?
• Is it possible to use a graphql mutation in a redux action so that the mutation can occur upon the dispatch of an action?

Answer 1

The "Apollo Way" would be to let the inputs be like React bound inputs, but the binding would happen via query and mutations, with optimistic responses added to improve interactivity.

Create mutations for each input, and call these when the inputs change. Provide optimistic responses so that user actions take hold immediately.

Likewise, create a query to get the input values, and use these to initialize the inputs.

If others can change the inputs as well, you will need to set up a subscription.

Answer 2

I suggest you add a subscription to the whole app. It could work like this:

• When you open the page you query for the values of <input1 /><input2 />
• Then you subscribe to the server via the subscribeToMore function of the query.
• The server has a loop which publishes each x seconds the data for the subscription. Which would be the data for <input1 /><input2 />
• Then you have some possibilities, you could update the store by hand or you add an id to the inputs and let the apollo client do the work via dataIdFromObject.