React Apollo Mutation State

A React HOC for Apollo GraphQL mutation, provides loading & error as props.

Usage

Install from NPM

$ npm i react-apollo-mutation-state --save

Config the HOC

import mutationState from 'react-apollo-mutation-state';

const withMutationState = mutationState({
  // name - {String} Optional. Default: 'mutation'
  // Variable name of the object for passing to props.
  name: 'mutation'
});

// For default config
const withMutationState = mutationState();

The higher order component withMutationState passes an object to props, default called mutation.

API's for the injected mutation object

API	Type	Description
mutation.set	Function {Object}	Set loading & error state
mutation.loading	Boolean	Read only. Current loading state
mutation.error	Object | Null	Read only. Error object if any

mutation.set({
  loading: true, // {Boolean} Required, Default: true
  error: null // {Object|Null} Optional, Default: null
});

Example

import mutationState from 'react-apollo-mutation-state';
import { graphql } from 'react-apollo';

const MyComponent = ({submit, mutation}) => (
  <form onSubmit={submit}>
    <input type="text" name="message" />
    {
      mutation.loading ?
        <button disabled>Loading...</button> :
        <button type="submit">Send</button>
    }
    <p>{mutation.error ? mutation.error.message : null}</p>
  </form>
);

const withData = graphql(PARSED_SUBMIT_MUTATION, {
  props: ({mutate, ownProps}) => ({
    const { mutation } = ownProps;
    submit: e => {
      e.preventDefault();
      mutation.set({ loading: true });
      mutate({
        variables: {
          message: e.target.message.value
        },
      }).then(() => {
        mutation.set({ loading: false, error: null });
      }).catch(error => {
        mutation.set({ loading: false, error });
      });
    },
  }),
});

const withMutationState = mutationState();

export default withMutationState(withData(MyComponent));

FAQ

Why use this HOC?

To set loading/error state in a GraphQL mutation container and get loading/error state as props in a UI component so that the UI component can be stateless.

Can I use Redux to achieve the same thing?

Yes. However in many cases, one loading (submitting/saving) state is only for a particular button or component. Saving one loading state in Redux store for a single button is kinda too complicated and takes time to modify. So let HOC to make it easy.

What's the future of this project?

Currently react-apollo-mutation-state only handles loading & error state of mutation, but it definitely can be more. There might be more interactions about mutation using this HOC in the future.