# gql-hook-codegen

> A utility to generate graphql hook from query string and schema

Latest version **1.2.0** (published 2024-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install gql-hook-codegen
pnpm add gql-hook-codegen
yarn add gql-hook-codegen
bun add gql-hook-codegen
```

Provides the command `gql-hook-codegen`.

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-05-28 |
| First published | 2021-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 155 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Rinto Jose |
| Maintainers | rintoj |
| Keywords | cli, GraphQL, React, Hooks, codegen |

## Links

- npm: https://www.npmjs.com/package/gql-hook-codegen
- Repository: https://github.com/rintoj/gql-hook-codegen
- Homepage: https://github.com/rintoj/gql-codegen#readme
- Issues: https://github.com/rintoj/gql-hook-codegen/issues
- npm.io page: https://npm.io/package/gql-hook-codegen

## Dependencies (15)

- [add](https://npm.io/package/add.md) ^2.0.6
- [esm](https://npm.io/package/esm.md) ^3.2.25
- [ink](https://npm.io/package/ink.md) ^3.0.8
- [chalk](https://npm.io/package/chalk.md) ^4.1.1
- [react](https://npm.io/package/react.md) ^17.0.2
- [clifer](https://npm.io/package/clifer.md) ^1.2.1
- [crypto](https://npm.io/package/crypto.md) ^1.0.1
- [graphql](https://npm.io/package/graphql.md) ^15.5.0
- [ts-node](https://npm.io/package/ts-node.md) ^10.0.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^10.0.0
- [prettier](https://npm.io/package/prettier.md) 2.8.8
- [fast-glob](https://npm.io/package/fast-glob.md) ^3.2.5
- [name-util](https://npm.io/package/name-util.md) ^1.3.0
- [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.6
- [typescript](https://npm.io/package/typescript.md) ^5.3.3

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

- 1.2.0 (latest) — 2024-05-28
- 1.1.1 — 2024-02-01
- 1.1.0 — 2024-02-01
- 0.0.0-development — 2024-02-01
- 1.0.23 — 2024-02-01
- 1.0.22 — 2023-11-14
- 1.0.21 — 2023-10-26
- 1.0.20 — 2023-10-26
- 1.0.19 — 2023-10-26
- 1.0.18 — 2023-10-26
- 1.0.17 — 2023-02-14
- 1.0.16 — 2022-10-14
- 1.0.15 — 2022-08-04
- 1.0.14 — 2022-08-04
- 1.0.13 — 2022-02-02
- … 13 more at https://npm.io/package/gql-hook-codegen/versions

## README

# gql-hook-codegen

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

This tool generates TypeScript types for queries/mutations written in an GraphQL project given a
valid GraphQL schema.

![hook-generation-git](https://github.com/rintoj/gql-hook-codegen/assets/10824903/b254ea6c-a813-4b42-828d-8f78a4d3eb3b)

## Install

### Yarn

```sh
yarn add gql-hook-codegen
```

### NPM

```sh
npm install gql-hook-codegen
```

## How to use

Step 1: Create a Typescript file `use-user.gql.ts` with the following content

```ts
import gql from 'graphql-tag'

const query = gql`
  query {
    user {
      name
    }
  }
`
```

Step 2: Add schema file `schema.gql`

```gql
type User {
  id: ID!
  name: String
}

type Query {
  user(id: ID!): User
}
```

Step 3: Run the following code:

```sh
npx gql-hook-codegen generate --pattern="*.gql.ts"
```

Step 4: Script will update `use-user.gql.ts` to the following:

```ts
import { QueryHookOptions, useQuery } from '@apollo/client'
import gql from 'graphql-tag'

const query = gql`
  query fetchUser($id: ID!) {
    user(id: $id) {
      name
    }
  }
`

export interface RequestType {
  id: string | undefined
}

export interface QueryType {
  user?: UserType
}

export interface UserType {
  name?: string
  __typename?: 'User'
}

export function useUserQuery(
  request: RequestType,
  options?: QueryHookOptions<QueryType, RequestType>,
) {
  return useQuery<QueryType, RequestType>(query, {
    variables: request,
    skip: !request.id,
    ...options,
  })
}
```

## VS Code Integration

Install [Save and Run](https://marketplace.visualstudio.com/items?itemName=wk-j.save-and-run) plugin
and add the following code to `.settings.json`

```json
{
  "saveAndRun": {
    "commands": [
      {
        "match": ".gql.ts",
        "cmd": "npx gql-hook-codegen generate --schema-file=../partner-portal-be/schema.gql --pattern='${file}'",
        "useShortcut": false,
        "silent": false
      }
    ]
  }
}
```

## More Examples

<!-- vscode-markdown-toc -->

1. [Schema](./docs/examples.md#Schema)
2. [Query](./docs/examples.md#Query)
3. [Query with no parameters](./docs/examples.md#Querywithnoparameters)
4. [Batched Queries](./docs/examples.md#BatchedQueries)
5. [Query with multiple inputs](./docs/examples.md#Querywithmultipleinputs)
6. [Query with enum](./docs/examples.md#Querywithenum)
7. [Query with date](./docs/examples.md#Querywithdate)
8. [Query with shared variable](./docs/examples.md#Querywithsharedvariable)
9. [Mutation](./docs/examples.md#Mutation)
10. [Lazy query](./docs/examples.md#Lazyquery)
11. [Query with union](./docs/examples.md#Querywithunion)

## Options

```sh
gql-hook-codegen   <generate> [--help] [--doc]

COMMANDS

generate

COMMON

--help     Show help

--doc      Generate documentation

```

## gql-hook-codegen generate

```sh

gql-hook-codegen generate   [--pattern=<string>]
                                      [--file=<string>]
                                      [--schema-file=<string>]
                                      [--schema-url=<string>]
                                      [--ignore=<string>]
                                      [--package=<string>]
                                      [--save]

OPTIONS

--pattern=<string>       File pattern

--file=<string>          A specific file to process

--schema-file=<string>   Location of the schema file

--schema-url=<string>    Url to fetch graphql schema from

--ignore=<string>        Folders to ignore

--package=<string>       Default package to use

--save                   Save schema locally if --schema-url is
                         used

```

## Automatic Release

Here is an example of the release type that will be done based on a commit messages:

| Commit message      | Release type          |
| ------------------- | --------------------- |
| fix: [comment]      | Patch Release         |
| feat: [comment]     | Minor Feature Release |
| perf: [comment]     | Major Feature Release |
| doc: [comment]      | No Release            |
| refactor: [comment] | No Release            |
| chore: [comment]    | No Release            |

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