Apollo mutation state is a hoc to track an apollo mutation state.
With npm
$ npm install --save apollo-mutation-state
With yarn
$ yarn add apollo-mutation-state
withMutationState(Options)(TargetComponent)
All options that can be passed to the hoc
Option | Default value | Type | Description |
---|---|---|---|
mutationName | mutate | string | The name of the method "mutate" from the graphql hoc |
propName | mutation | string | The name of the prop that will be used to pass the mutation state object |
propagateError | false | boolean | Tells the hoc to propagate the error of the "mutate" method. If false, the hoc will not propagate the error from the mutate and you will not be able to ".catch" that error |
wrapper | false | boolean | Should be true if the hoc is the parent of a graphql hoc component. False if it is the child. |
wrapName | wrapMutate | string | The name of the method to wrap the mutation call. This method is only passed if wrapper is true |
Prop | Type | Description |
---|---|---|
loading | boolean | Indicates if the mutation is loading |
error | boolean | Indicates if there was an error with the mutation |
success | boolean | Indicates if the mutation was completed |
clearState() | Function | A function that can be called to clear the MutationState {loading: false, error: null, success: false} |
import React from 'react'
// You can change the prop "mutation" to another name using the "propName" option
const CreateUserButton = ({ mutation: { loading, error, success, clearState } }) => (
<Button loading={loading}>Create User</Button>
);
export default CreateUserButton;
import { graphql, gql, compose } from 'react-apollo';
import withMutationState from 'apollo-mutation-state';
import TargetComponent from './TargetComponent';
const CREATE_USER = /* gql mutation */;
const withMutation = graphql(CREATE_USER);
const enhance = compose(
withMutation,
withMutationState(), // this is a child of withMutation
);
export default enhance(TargetComponent);
import { graphql, gql, compose } from 'react-apollo';
import withMutationState from 'apollo-mutation-state';
import TargetComponent from './TargetComponent';
const CREATE_USER = /* gql mutation */;
const withMutation = graphql(CREATE_USER, {
props: ({ mutate, ownProps: { wrapMutate } }) => ({
createUser(user) {
// You must use wrapMutate, so the hoc can track the mutation state
wrapMutate(mutate({
variables: { user },
}))
.then(response => console.log(response))
.catch(err => console.error(err)); // You must set propagateError if you want to catch errors
},
}),
});
const enhance = compose(
withMutationState({ wrapper: true, propagateError: true }), // this is a parent of withMutation
withMutation,
);
export default enhance(TargetComponent);
import { graphql, gql, compose } from 'react-apollo';
import withMutationState from 'apollo-mutation-state';
import TargetComponent from './TargetComponent';
const CREATE_USER = /* gql mutation */;
const DELETE_USER = /* gql mutation */;
const withCreateUser = graphql(CREATE_USER, {
name: 'createUser', // You must set the name of the mutation if using multiple mutations <https://www.learnapollo.com/tutorial-react/react-06/>.
props: ({ createUser, ownProps: { wrapMutate } }) => ({
createUser(user) {
// You must use wrapMutate, so the hoc can track the mutation state
wrapMutate(createUser({
variables: { user },
}))
.then(response => console.log(response))
.catch(err => console.error(err)); // You must set propagateError if you want to catch errors
},
}),
});
const withDeleteUser = graphql(DELETE_USER, {
name: 'deleteUser', // You must set the name of the mutation if using multiple mutations <https://www.learnapollo.com/tutorial-react/react-06/>.
props: ({ deleteUser, ownProps: { wrapMutate } }) => ({
deleteUser(id) {
// You must use wrapMutate, so the hoc can track the mutation state
wrapMutate(deleteUser({
variables: { id },
}))
.then(response => console.log(response))
.catch(err => console.error(err)); // You must set propagateError if you want to catch errors
},
}),
});
const enhance = compose(
withMutationState({ wrapper: true, propagateError: true, propName: 'createUserState' }), // this is a parent of withMutation
withCreateUser,
withMutationState({ wrapper: true, propagateError: true, propName: 'deleteUserState' }),
withDeleteUser,
);
export default enhance(TargetComponent);
- You should use this hoc as a wrapper if you want to implement custom logic after the mutation completes
- You should use one withMutationState for each mutation
- This hoc only works if using a mutation with one call at a time. If calling the same mutation multiple times in parallel, the hoc can't keep track of all mutation instances.
MIT