Installation

npm i @cweise/redux-graphql graphql-tag redux-thunk

Usage

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import gql from "graphql-tag";
import { request, select } from "@cweise/redux-graphql";

export const query = gql`
  query {
    continents {
      name
      code
    }
  }
`;

const MyComponent = () => {
  const dispatch = useDispatch();
  const { data, isFetching } = useSelector(select(query));

  useEffect(() => {
    dispatch(request(query));
  }, []);

  if (isFetching) {
    return "is fetching";
  }

  if (!data) {
    return null;
  }

  return (
    <ul>
      {data.continents.map(continent => (
        <li>{continent.name}</li>
      ))}
    </ul>
  );
};

API

Name	Type	Description
createReducer(options)	function	Create graphql reducer with at least url property
request(gql)	function	Redux action to receive remote data
select(gql)	function	Redux selector to select data from state.

createReducer() Options

Option	Type	Description
url *	string	A url that point to your graphql backend
urlAliases	Object	If you have multiple graphql endpoints, you can add each of them here
tokenPath	string	If you have an auth header already stored in your redux store you can connect it here

* required

---

Setup

Redux store

import { createStore, applyMiddleware, combineReducers } from "redux";
import thunk from "redux-thunk";
import { createReducer } from "@cweise/redux-graphql";

const reducer = combineReducers({
  graphql: createReducer({ url: "https://countries.trevorblades.com" })
});

const store = createStore(reducer, applyMiddleware(thunk));

export default store;

Dispatching and selecting

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import gql from "graphql-tag";
import { request, select } from "@cweise/redux-graphql";

export const query = gql`
  query {
    continents {
      name
      code
    }
  }
`;

const MyComponent = () => {
  const dispatch = useDispatch();
  const { data, isFetching } = useSelector(select(query));

  useEffect(() => {
    dispatch(request(query));
  }, []);

  if (isFetching) {
    return "is fetching";
  }

  if (!data) {
    return null;
  }

  return (
    <ul>
      {data.continents.map(continent => (
        <li>{continent.name}</li>
      ))}
    </ul>
  );
};