Package Exports

react-apollo-mutation-state

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-apollo-mutation-state) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.