# use-redux-graphql

> Connect to Redux state with React Hook for client-side GraphQL query via lightweight graphql-object

Latest version **0.0.2** (published 2020-01-22) · 0 weekly downloads

## Install

```sh
npm install use-redux-graphql
pnpm add use-redux-graphql
yarn add use-redux-graphql
bun add use-redux-graphql
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-01-22 |
| First published | 2020-01-22 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 3.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Maintainers | andersdjohnson |
| Keywords | redux, redux-selectors, reselect, useSelector, redux-store, redux-store-subscribe, graphql, graphql-schema, graphql-client, graphql-object, react, react-hooks, typescript |

## Links

- npm: https://www.npmjs.com/package/use-redux-graphql
- Repository: https://github.com/AndersDJohnson/use-redux-graphql
- Homepage: https://github.com/AndersDJohnson/use-redux-graphql/tree/master/packages/use-redux-graphql#readme
- Issues: https://github.com/AndersDJohnson/use-redux-graphql/issues
- npm.io page: https://npm.io/package/use-redux-graphql

## Dependencies (1)

- [graphql-object](https://npm.io/package/graphql-object.md) ^1.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2020-01-22
- 0.0.1 — 2020-01-22
- 0.0.0 — 2020-01-22

## README

# use-redux-graphql

Connect to your Redux state with a React hook that does a client-side GraphQL query
via the lightweight [`graphql-object`](https://www.npmjs.com/package/graphql-object) utility.

⚛️:sunglasses:⚛️

Use Apollo? See [`use-redux-graphql-apollo`](https://github.com/AndersDJohnson/use-redux-graphql/tree/master/packages/use-redux-graphql-apollo#readme).

This can help as you migrate an existing application from storing API response data in Redux
and accessing through selectors toward fetching it from a GraphQL server via React Hooks.

Queries will automatically re-execute whenever state changes to get the latest data.

## Table of Contents
* [Usage in Components](#usage-in-components)
* [TypeScript](#typescript)

## Usage in Components

Here's how you use the React hook it in a component:

```tsx
import * as React from "react";
import gql from "graphql-tag";
import { useReduxGraphQuery } from "use-redux-graphql";
import { ReduxGQLQuery } from "./__generated__/reduxGQL";

const COMP_QUERY = gql`
  {
    redux {
      name
      nested {
        flag
      }
    }
  }
`;

export const Comp = () => {
  const { data } = useReduxGraphQuery<ReduxGQLQuery>(COMP_QUERY);

  return <h1>name: {data?.redux?.name}</h1>;
};
```

## TypeScript

If you want to generate TypeScript types from a Redux GraphQL schema you maintain,
you can write a schema in an external file, e.g., `src/graphql/redux.graphql`:

```graphql
type Place {
  kind: String
}

type Nested {
  flag: Boolean
  place: Place
}

type Redux {
  name: String
  nested: Nested
}

type Query {
  redux: Redux
}
```

And here's how you can build the types:

```shell
mkdir -p src/__generated__
```
```shell
npm install --save-dev graphql-schema-typescript
```
```shell
npx graphql-schema-typescript generate-ts src/graphql --typePrefix ReduxGQL --output src/__generated__/reduxGQL.d.ts
```

You can add that last command to a `build:types:graphql` script in your `package.json`.

---
_Source: https://npm.io/package/use-redux-graphql · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._