react-apollo-mutation-state

    1.0.1 • Public • Published

    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.

    Install

    npm i react-apollo-mutation-state

    DownloadsWeekly Downloads

    79

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • hanz