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
; const withMutationState = ;
// For default configconst withMutationState = ;
The higher order component withMutationState
passes an object to props, default called mutation
.
mutation
object
API's for the injected 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;
Example
;; const MyComponent = <form onSubmit=submit> <input type="text" name="message" /> mutationloading ? <button disabled>Loading...</button> : <button type="submit">Send</button> <p>mutationerror ? mutationerrormessage : null</p> </form>; const withData = ; const withMutationState = ; ;
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.