{"id":13408558,"url":"https://github.com/youknowriad/react-graphql-redux","last_synced_at":"2025-04-30T11:55:09.847Z","repository":{"id":65372990,"uuid":"78210141","full_name":"youknowriad/react-graphql-redux","owner":"youknowriad","description":"This library allows you to use GraphQL to query your Redux store","archived":false,"fork":false,"pushed_at":"2017-01-09T15:16:12.000Z","size":33,"stargazers_count":49,"open_issues_count":0,"forks_count":3,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-02-25T01:43:22.328Z","etag":null,"topics":["graphql","react","redux"],"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/youknowriad.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-01-06T13:59:07.000Z","updated_at":"2023-02-17T07:17:10.000Z","dependencies_parsed_at":"2023-01-19T23:35:18.595Z","dependency_job_id":null,"html_url":"https://github.com/youknowriad/react-graphql-redux","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youknowriad%2Freact-graphql-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youknowriad%2Freact-graphql-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youknowriad%2Freact-graphql-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youknowriad%2Freact-graphql-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/youknowriad","download_url":"https://codeload.github.com/youknowriad/react-graphql-redux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242650895,"owners_count":20163610,"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":["graphql","react","redux"],"created_at":"2024-07-30T20:00:53.641Z","updated_at":"2025-03-09T05:30:25.390Z","avatar_url":"https://github.com/youknowriad.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries and Frameworks"],"sub_categories":[],"readme":"react-graphql-redux\n===================\n\nThis library allows you to use GraphQL to query your Redux store.\nThis library is in its early stages, feel free to send any PR.\n\nDetails about this library in this [blog post](https://riad.blog/2017/01/07/graphql-is-not-only-for-backend-react-redux/)\n\nUsage\n-----\n\n1- Create a GraphQL schema and resolver to match your data:\n\n```js\nconst createGraph = store =\u003e {\n\tconst schema = buildSchema(`\n\t\ttype Query {\n\t\t\thello( name: String ): String\n\t\t}\n\t`);\n\n\tconst root = {\n\t\thello: ({ name }) =\u003e `Hello ${name}!`\n\t};\n\n\treturn { schema, root };\n};\n```\n\n2- Wrap your React Root Component using `GraphProvider`\n\n```js\nimport { GraphProvider } from 'react-graphql-redux';\n\nconst store = // create your Redux store\nconst { schema, root } = createGraph( store );\n\nrender(\n\t\u003cGraphProvider store={ store } schema={ schema } root={ root }\u003e\n\t\t\u003cApp /\u003e\n\t\u003c/GraphProvider\u003e\n);\n```\n\n3- Start using the `query` Higher Order Component to provide data as a prop to your components\n\n```js\nimport { query } from 'react-graphql-redux';\n\nconst MyComponent = ({ data }) =\u003e {\n\treturn (\n\t\t\u003cdiv\u003e{ data \u0026\u0026 data.hello }\u003c/div\u003e\n\t);\n};\n\nexport default query( '{ hello( name: \"Riad\" ) }' )( MyComponent );\n```\n\nNotice that now, components just **declares** the data they need without worrying how it's fetched and extracted from the state.\n\nUsing Redux Selectors in your Resolvers\n---------------------------------------\n\nIn the example above, the function responsible of returning the data : `({ name }) =\u003e Hello ${name}!` is called **a resolver**. In this example, it just concats hello with the name arg.\nBut the main purpose of these resolvers will be to retrieve data from the state by calling Redux Selectors.\n\nSay we have a `getTodos` selector which will retrieve todos from the store. The corresponding resolver could be:\n\n```js\nimport { getTodos } from './selectors';\n\nconst createGraph = store =\u003e {\n\tconst schema = buildSchema(`\n\t\ttype Todo {\n\t\t\tid: Int\n\t\t\ttext: String\n\t\t\tdone: Boolean\n\t\t}\n\n\t\ttype Query {\n\t\t\ttodos: [Todo]\n\t\t\t// Other root query nodes\n\t\t}\n\t`);\n\n\tconst root = {\n\t\ttodos: () =\u003e {\n\t\t\tconst state = store.getState();\n\t\t\treturn getTodos(state);\n\t\t}\n\t\t// Other resolvers here\n\t};\n\n\treturn { schema, root };\n};\n```\n\nFetch Data From the server\n--------------------------\n\nResolvers are also responsible of triggering Redux action creators to fetch the desired data.\n\nFor example, if we have a`fetchTodos` action creator we should call to fetch the todos, and we want to refresh this data if it has not been fetched on the last 5 minutes, we could write:\n\n```js\nimport { refreshWhenExpired } from 'react-graphql-redux';\nimport { fetchTodos } from './actions';\n\nconst createGraph = store =\u003e {\n\t// ....\n\n\tconst root = {\n\t\ttodos: () =\u003e {\n\t\t\tconst timeout =  5 * 60 * 1000;\n\t\t\tconst resolverIdentifier = 'fetch-todos';\n\t\t\trefreshWhenExpired(store, resolverIdentifier, {}, timeout, () =\u003e {\n\t\t\t\tstore.dispatch(fetchTodos());\n\t\t\t});\n\t\t\tconst state = store.getState();\n\t\t\treturn getTodos(state);\n\t\t}\n\t\t// Other resolvers here\n\t};\n\n// ...\n```\n\nBut, to be able to use the refresh helpers provided by the library (like `refreshWhenExpired`), make sure to include the `graphReducer` to your store.\n\n```js\nimport { graphReducer } from 'react-graphql-redux';\n\nconst myReduxReducer = combineReducers({\n\tgraphqlResolvers: graphReducer,\n\t// Add your other reducers here\n});\n```\n\nMore\n----\n\n * The query can be computed using component props (use a funciton instead of string for the first `query` arg)\n * You can use graphql variables in your queries (the second `arg` of `query`)\n * If you want to refresh the data on each new `query` used, it's possible\n * You can use `GraphiQL` to test/explore your graph\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyouknowriad%2Freact-graphql-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyouknowriad%2Freact-graphql-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyouknowriad%2Freact-graphql-redux/lists"}