{"id":21325533,"url":"https://github.com/lhz516/react-apollo-mutation-state","last_synced_at":"2025-07-12T06:32:37.298Z","repository":{"id":57154538,"uuid":"98832898","full_name":"lhz516/react-apollo-mutation-state","owner":"lhz516","description":"A React HOC wrapper for Apollo GraphQL mutation, provides loading and error in props","archived":false,"fork":false,"pushed_at":"2017-08-04T09:13:43.000Z","size":20,"stargazers_count":16,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-02T02:04:29.659Z","etag":null,"topics":["apollo","graphql","loading","mutate","mutation","react","state"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lhz516.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-31T00:27:16.000Z","updated_at":"2018-07-03T08:39:49.000Z","dependencies_parsed_at":"2022-09-06T18:11:04.022Z","dependency_job_id":null,"html_url":"https://github.com/lhz516/react-apollo-mutation-state","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhz516%2Freact-apollo-mutation-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhz516%2Freact-apollo-mutation-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhz516%2Freact-apollo-mutation-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhz516%2Freact-apollo-mutation-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lhz516","download_url":"https://codeload.github.com/lhz516/react-apollo-mutation-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225802704,"owners_count":17526452,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","graphql","loading","mutate","mutation","react","state"],"created_at":"2024-11-21T21:06:32.939Z","updated_at":"2024-11-21T21:06:33.607Z","avatar_url":"https://github.com/lhz516.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Apollo Mutation State\n\nA React HOC for Apollo GraphQL mutation, provides loading \u0026 error as props.\n\n### Usage\nInstall from NPM\n```\n$ npm i react-apollo-mutation-state --save\n```\nConfig the HOC\n```js\nimport mutationState from 'react-apollo-mutation-state';\n\nconst withMutationState = mutationState({\n  // name - {String} Optional. Default: 'mutation'\n  // Variable name of the object for passing to props.\n  name: 'mutation'\n});\n```\n```js\n// For default config\nconst withMutationState = mutationState();\n```\nThe higher order component `withMutationState` passes an object to props, default called `mutation`.\n\n#### API's for the injected `mutation` object\n|API|Type|Description|\n|-|-|-|\n|mutation.set|Function {Object}|Set loading \u0026 error state|\n|mutation.loading|Boolean|Read only. Current loading state|\n|mutation.error|Object \\| Null|Read only. Error object if any|\n\n```js\nmutation.set({\n  loading: true, // {Boolean} Required, Default: true\n  error: null // {Object|Null} Optional, Default: null\n});\n```\n\n### Example\n\n```js\nimport mutationState from 'react-apollo-mutation-state';\nimport { graphql } from 'react-apollo';\n\nconst MyComponent = ({submit, mutation}) =\u003e (\n  \u003cform onSubmit={submit}\u003e\n    \u003cinput type=\"text\" name=\"message\" /\u003e\n    {\n      mutation.loading ?\n        \u003cbutton disabled\u003eLoading...\u003c/button\u003e :\n        \u003cbutton type=\"submit\"\u003eSend\u003c/button\u003e\n    }\n    \u003cp\u003e{mutation.error ? mutation.error.message : null}\u003c/p\u003e\n  \u003c/form\u003e\n);\n\nconst withData = graphql(PARSED_SUBMIT_MUTATION, {\n  props: ({mutate, ownProps}) =\u003e ({\n    const { mutation } = ownProps;\n    submit: e =\u003e {\n      e.preventDefault();\n      mutation.set({ loading: true });\n      mutate({\n        variables: {\n          message: e.target.message.value\n        },\n      }).then(() =\u003e {\n        mutation.set({ loading: false, error: null });\n      }).catch(error =\u003e {\n        mutation.set({ loading: false, error });\n      });\n    },\n  }),\n});\n\nconst withMutationState = mutationState();\n\nexport default withMutationState(withData(MyComponent));\n```\n\n### FAQ\n\n#### Why use this HOC?\n\nTo 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.\n\n#### Can I use Redux to achieve the same thing?\n\nYes. 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.\n\n#### What's the future of this project?\n\nCurrently `react-apollo-mutation-state` only handles loading \u0026 error state of mutation, but it definitely can be more. There might be more interactions about mutation using this HOC in the future.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flhz516%2Freact-apollo-mutation-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flhz516%2Freact-apollo-mutation-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flhz516%2Freact-apollo-mutation-state/lists"}