How to determine mutation loading state using apollo graphql reaction

Question

Update 2018: The Apollo 2.1 client has added a new Mutation component that adds the download property back. See @ robin-wieruch's answer below and the announcement here https://dev-blog.apollodata.com/introduction-react-apollo-2-1-c837cc23d926 Read the original question, which now only applies to earlier versions of Apollo.

---

Using the current graphql version of higher order graphql in graphql react-apollo (v0.5.2), I don't see a documented way to inform my user interface that the mutation is waiting for a server response. I see that earlier versions of the package sent a property indicating the download.

Requests still get the download property, as described here: http://dev.apollodata.com/react/queries.html#default-result-props

My application also uses redundancy, so I think one way to do this is to connect my component to redundancy and pass a property to a function that will put my user interface in load state. Then, when I rewrite my graphql mutation into a property, I can make a call to update the redundancy store.

More or less like this:

 function Form({ handleSubmit, loading, handleChange, value }) { return ( <form onSubmit={handleSubmit}> <input name="something" value={value} onChange={handleChange} disabled={loading} /> <button type="submit" disabled={loading}> {loading ? 'Loading...' : 'Submit'} </button> </form> ); } const withSubmit = graphql( gql' mutation submit($something : String) { submit(something : $something) { id something } } ', { props: ({ ownProps, mutate }) => ({ async handleSubmit() { ownProps.setLoading(true); try { const result = await mutate(); } catch (err) { // @todo handle error here } ownProps.setLoading(false); }, }), } ); const withLoading = connect( (state) => ({ loading: state.loading }), (dispatch) => ({ setLoading(loading) { dispatch(loadingAction(loading)); }, }) ); export default withLoading(withSubmit(Form)); 

I am curious if there is a more idiomatic approach to informing the user interface that the mutation is "in flight." Thank you

Answer 1

I reposted this question on github and the proposed solution was to use something like a higher order responsive component in the same way as you suggested in your original question. I did a similar thing - without using the abbreviation, but - as stated in this question .

To give Tom Coleman an answer from a github problem:

Actually, it makes no sense to include the loading state in a mutation container; if you think about it, you can cause a mutation twice at the same time - what loading status should be passed to the child? my feeling is generally not good to mix the imperative (this.mutate (x, y, z)) with declarative (requisites) things; this leads to unsolvable discrepancies.

Answer 2

Anyone who comes across this issue, starting with Apollo Client 2.1, you have access to these properties in the function of rendering the details of the Query and Mutation component .

 import React from "react"; import { Mutation } from "react-apollo"; import gql from "graphql-tag"; const TOGGLE_TODO = gql' mutation ToggleTodo($id: Int!) { toggleTodo(id: $id) { id completed } } '; const Todo = ({ id, text }) => ( <Mutation mutation={TOGGLE_TODO} variables={{ id }}> {(toggleTodo, { loading, error, data }) => ( <div> <p onClick={toggleTodo}> {text} </p> {loading && <p>Loading...</p>} {error && <p>Error :( Please try again</p>} </div> )} </Mutation> ); 

Note. The sample code is taken from the Apollo Client 2.1 blog post.