{"id":43128639,"url":"https://github.com/500tech/redux-graphql","last_synced_at":"2026-01-31T20:52:46.429Z","repository":{"id":72532089,"uuid":"123242470","full_name":"500tech/redux-graphql","owner":"500tech","description":"Redux GraphQL integration","archived":false,"fork":false,"pushed_at":"2018-03-26T08:49:09.000Z","size":66,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-30T10:33:29.593Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/500tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-28T06:49:44.000Z","updated_at":"2021-04-09T07:35:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"419252f1-d9e3-4834-981f-b99569690ba7","html_url":"https://github.com/500tech/redux-graphql","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/500tech/redux-graphql","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/500tech%2Fredux-graphql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/500tech%2Fredux-graphql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/500tech%2Fredux-graphql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/500tech%2Fredux-graphql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/500tech","download_url":"https://codeload.github.com/500tech/redux-graphql/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/500tech%2Fredux-graphql/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28954406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T18:30:42.805Z","status":"ssl_error","status_checked_at":"2026-01-31T18:30:19.593Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-01-31T20:52:46.339Z","updated_at":"2026-01-31T20:52:46.415Z","avatar_url":"https://github.com/500tech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-graphql\n\nRedux GraphQL Integration\n\n# Running demo (NodeJS)\n\n```\n$ npm run server\n$ npm run demo\n```\n\n# install\n\n`npm i -S redux-graphql`  \n\n# Concepts\nQuery associated models using GraphQL, and automatically keep them normalized in the store:\n\u003cimg src=\"https://lh4.googleusercontent.com/rJc_RYbuc6haxGB05Moi3hxPSJCuTKOcIusrj7tFQpq-j9qC2hsJQWHbhjyDHoEDesyFfxCb7P2CUzhrvCrJ=w1920-h983-rw\"/\u003e\n\nUse selectors to query the store and get models back into your components:\n\u003cimg src=\"https://lh4.googleusercontent.com/ln_fOpiQuElUtGvYkxZjUBrUHC1babxC4-GrZweiD64VJvU97M5Wk8vRx-end-wKi2QXSBTKqnjgT2T_kvSK=w1920-h983-rw\"/\u003e\n\n# usage\n\n1)\n\nInclude the reducer and middleware:\n```javascript\n// rootReducer.js\nimport { graphqlReducer } from 'redux-graphql';\n\nrootReducer = combineReducers({\n  graph: graphqlReducer()\n});\n\n// store\nimport { graphqlMiddleware } from 'redux-graphql';\nmiddelwares = [\n ...,\n graphqlMiddleware\n];\n```\nCreate Request Actions, that will fetch the data, and put it on the store normalized (flat):\n```javascript\nimport { graphqlRequestAction } from 'redux-graphql';\nimport getCampaignsQuery from './queries/get-campaigns.gql';\nimport createCampaignsQuery from './queries/create-campaign.gql';\n\nexport const getCampaigns = graphqlRequestAction(getCampaignsQuery);\n```\nCustom success callback, and calling actions that maniuplate the state, directly:\n```javascript\n// Either set the data after create:\nexport const createCampaign = graphqlActionCreator(createCampaignsQuery, {\n  onSuccess: (data, dispatch) =\u003e dispatch(graphqlSet('Campaign', data.id, data))\n});\n\n// Or call get campaigns again:\nconst createCampaign = graphqlActionCreator(getCampaignsQuery, {\n  onSuccess: (data, dispatch) =\u003e dispatch(getCampaigns())\n});\n```\nUse the actions and selector in the component:\n```javascript\n// component\nimport { selectAll, graphqlDeleteAll } from 'redux-graphql';\nimport { getCampaigns, createCampaign } from './actions/campaign-actions';\n\nclass CampaignsList extends React.Component {\n  componentDidMount() {\n    // get / refresh data\n    this.props.getCampaigns();\n  }\n  componentWillUnmount() {\n    // clear data\n    this.props.graphqlDeleteAll('Campaign');\n  }\n  onCreate(campaignData) {\n    this.props.createCampaign({ campaign: campaignData }); // Whatever is passed to the action will be used as variables\n  }\n  render() {\n    return this.props.campaigns.map(...)\n  }\n}\n\nconst mapStateToProps = (state) =\u003e {\n  // get denormalized campaign, with all publishers and their ads:\n  campaigns: selectAll(state.graphql, 'Campaign', { Publisher: { Ad: {} } })\n};\nexport default connect(mapStateToProps, {\n  getCampaigns,\n  graphqlClear\n})(CampaignsList);\n```\n\n# normalizing\n\nTo be able to normalize we need to know for each resource if it should be normalized and by which key.\nWe use an alias in graphql query to denote the key `__redux_key`\nwe also query `__typename` to know under which resource to store the results.\n\nFor example:\n\n```graphql\nquery getCampaigns() {\n  campaigns {\n    id\n    __typename\n    __redux_key: id\n    title\n    description\n    publishers {\n      name\n      __typename\n      __redux_key: name\n      campaignId\n      budget\n      ads {\n        id\n        __redux_key: id\n        __typename\n        publisherName\n        campaignId\n        image {\n          // doesn't normalize\n          id\n          url\n          width\n          height\n        }\n      }\n    }\n  }\n}\n```\n\nWill be stored like so:\n```javascript\n{\n  Campaign: {\n    1: {\n      id: 1,\n      __typename: 'Campaign',\n      __redux_key: 1,\n      title: '...',\n      description: '...',\n      publishers: [\n        { __redux_resource: 'Publisher', key: 'Google' },\n        { __redux_resource: 'Publisher', key: 'Facebook' }\n      ]\n    }\n  },\n  Publisher: {\n    Google: {\n      name: 'Google',\n      __typename: 'Publisher',\n      __redux_key: 'Google',\n      campaignId: 1,\n      budget: 1000,\n      ads: [\n        { __redux_resource: 'Ad', key: 1 }\n      ]\n    },\n    Facebook: {...}\n  },\n  Ad: {\n    id: 1,\n    __redux_key: 1,\n    __typename: 'Ad',\n    publisherName: 'Google',\n    campaignId: 1,\n    image: {\n      id: 1,\n      url: 'http://my.image',\n      width: 100,\n      height: 100\n    }\n  }\n}\n```\n\n# Denormalizing using selectors\nDenormalizing using the same graphql strings to instruct the selector which parts should be denormalized.\nFor example:\n```javascript\nconst denormalizer = {\n  Publisher: {}\n}\n\nselectGrahpql(state, 'Campaign', 1, denormalizer) // using above state\n```\nWill produce the denormalized object:\n```javascript\n{\n  id: 1,\n  __typename: 'Campaign',\n  __redux_key: 1,\n  title: '...',\n  description: '...',\n  publishers: [\n    {\n      name: 'Google',\n      __typename: 'Publisher',\n      __redux_key: 'Google',\n      campaignId: 1,\n      budget: 1000,\n      ads: [\n        { __redux_resource: 'Ad', key: 1 }\n      ]\n    },\n    { ... }\n  ]\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F500tech%2Fredux-graphql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F500tech%2Fredux-graphql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F500tech%2Fredux-graphql/lists"}