https://github.com/cweise/redux-graphql

🚀A redux helper library to perform graphql requests.
https://github.com/cweise/redux-graphql

Last synced: 19 days ago
JSON representation

🚀A redux helper library to perform graphql requests.

• Host: GitHub
• URL: https://github.com/cweise/redux-graphql
• Owner: cweise
• Created: 2020-03-11T15:12:35.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T09:44:45.000Z (almost 2 years ago)
• Last Synced: 2024-10-17T12:55:57.252Z (29 days ago)
• Language: JavaScript
• Homepage:
• Size: 809 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Installation

```bash

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

```

## Usage

```javascript

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 (

    


      {data.continents.map(continent => (

        
{continent.name}

      ))}

    

  );

};

```


## 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

```javascript

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

```javascript

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 (

    


      {data.continents.map(continent => (

        
{continent.name}

      ))}

    

  );

};

```