Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/youknowriad/react-graphql-redux
This library allows you to use GraphQL to query your Redux store
https://github.com/youknowriad/react-graphql-redux
graphql react redux
Last synced: about 2 months ago
JSON representation
This library allows you to use GraphQL to query your Redux store
- Host: GitHub
- URL: https://github.com/youknowriad/react-graphql-redux
- Owner: youknowriad
- License: mit
- Created: 2017-01-06T13:59:07.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-01-09T15:16:12.000Z (over 7 years ago)
- Last Synced: 2024-07-26T13:38:49.954Z (about 2 months ago)
- Topics: graphql, react, redux
- Language: JavaScript
- Homepage:
- Size: 32.2 KB
- Stars: 49
- Watchers: 10
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-algeria - react-graphql-redux - use GraphQL to query your Redux store (Libraries and Frameworks)
README
react-graphql-redux
===================
This library allows you to use GraphQL to query your Redux store.
This library is in its early stages, feel free to send any PR.
Details about this library in this [blog post](https://riad.blog/2017/01/07/graphql-is-not-only-for-backend-react-redux/)
Usage
-----
1- Create a GraphQL schema and resolver to match your data:
```js
const createGraph = store => {
const schema = buildSchema(`
type Query {
hello( name: String ): String
}
`);
const root = {
hello: ({ name }) => `Hello ${name}!`
};
return { schema, root };
};
```
2- Wrap your React Root Component using `GraphProvider`
```js
import { GraphProvider } from 'react-graphql-redux';
const store = // create your Redux store
const { schema, root } = createGraph( store );
render(
);
```
3- Start using the `query` Higher Order Component to provide data as a prop to your components
```js
import { query } from 'react-graphql-redux';
const MyComponent = ({ data }) => {
return (
{ data && data.hello }
);
};
export default query( '{ hello( name: "Riad" ) }' )( MyComponent );
```
Notice that now, components just **declares** the data they need without worrying how it's fetched and extracted from the state.
Using Redux Selectors in your Resolvers
---------------------------------------
In the example above, the function responsible of returning the data : `({ name }) => Hello ${name}!` is called **a resolver**. In this example, it just concats hello with the name arg.
But the main purpose of these resolvers will be to retrieve data from the state by calling Redux Selectors.
Say we have a `getTodos` selector which will retrieve todos from the store. The corresponding resolver could be:
```js
import { getTodos } from './selectors';
const createGraph = store => {
const schema = buildSchema(`
type Todo {
id: Int
text: String
done: Boolean
}
type Query {
todos: [Todo]
// Other root query nodes
}
`);
const root = {
todos: () => {
const state = store.getState();
return getTodos(state);
}
// Other resolvers here
};
return { schema, root };
};
```
Fetch Data From the server
--------------------------
Resolvers are also responsible of triggering Redux action creators to fetch the desired data.
For 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:
```js
import { refreshWhenExpired } from 'react-graphql-redux';
import { fetchTodos } from './actions';
const createGraph = store => {
// ....
const root = {
todos: () => {
const timeout = 5 * 60 * 1000;
const resolverIdentifier = 'fetch-todos';
refreshWhenExpired(store, resolverIdentifier, {}, timeout, () => {
store.dispatch(fetchTodos());
});
const state = store.getState();
return getTodos(state);
}
// Other resolvers here
};
// ...
```
But, to be able to use the refresh helpers provided by the library (like `refreshWhenExpired`), make sure to include the `graphReducer` to your store.
```js
import { graphReducer } from 'react-graphql-redux';
const myReduxReducer = combineReducers({
graphqlResolvers: graphReducer,
// Add your other reducers here
});
```
More
----
* The query can be computed using component props (use a funciton instead of string for the first `query` arg)
* You can use graphql variables in your queries (the second `arg` of `query`)
* If you want to refresh the data on each new `query` used, it's possible
* You can use `GraphiQL` to test/explore your graph