React HOC for Apollo GraphQL mutation, passing current loading state to props

announce
1

I just wrote a React HOC for getting mutation state like loading/error from props.

Apollo doesn’t provide loading props when doing Mutations for some reason, so we have to handle the loading state ourselves. Basically there are 3 ways:

  1. use state in your component
  2. use redux or other data flow libraries
  3. use higher order component

Personally I like the 3rd way most because it’s clean and reusable.

Here is the Github link. Please give me some feedback. I appreciate all comments.
react-apollo-mutation-state in GitHub

2

If I remember correctly, mutation returns a promise. This promise is usable for saving state.

3

Do you mean to return a Promise from GraphQL container and use it in the component? Such as <form onSubmit={e => submit(e).then(() => do somthing)}>? I think it still needs setState to handle the loading state change.

4

Pseudo code:

onSubmit = async (e) => {
  this.setState({ saving: true });
  await this.props.submit();
  this.setState({ saving: false });
}

Granted, saving state in the component it self is not always wanted. I handle this kind of logic myself with redux form, and in redux sagas.

5

Your solution is the first way that I mentioned up there. It’s of course right. But the purpose of my package react-apollo-mutation-state is to make UI component stateless. all the logic of those requests can be done in a container.

I also thought about using Redux to achieve the same goal, but in most cases, one loading/submitting/saving state is only for a particular button. Saving one loading state in redux store for a single button is kinda too complicated and takes time to modify.

I’m not saying using HOC is the best way, but at least in some conditions, using HOC can be really comfortable.