Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lhz516/react-apollo-mutation-state
A React HOC wrapper for Apollo GraphQL mutation, provides loading and error in props
https://github.com/lhz516/react-apollo-mutation-state
apollo graphql loading mutate mutation react state
Last synced: about 1 month ago
JSON representation
A React HOC wrapper for Apollo GraphQL mutation, provides loading and error in props
- Host: GitHub
- URL: https://github.com/lhz516/react-apollo-mutation-state
- Owner: lhz516
- License: mit
- Created: 2017-07-31T00:27:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-04T09:13:43.000Z (over 7 years ago)
- Last Synced: 2024-05-02T02:04:29.659Z (8 months ago)
- Topics: apollo, graphql, loading, mutate, mutation, react, state
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 16
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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
```js
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'
});
```
```js
// 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|
```js
mutation.set({
loading: true, // {Boolean} Required, Default: true
error: null // {Object|Null} Optional, Default: null
});
```
### Example
```js
import mutationState from 'react-apollo-mutation-state';
import { graphql } from 'react-apollo';
const MyComponent = ({submit, mutation}) => (
{
mutation.loading ?
Loading... :
Send
}
{mutation.error ? mutation.error.message : null}
);
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.