rintoj/gql-hook-codegen

gql-hook-codegen

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

Install

Yarn

yarn add gql-hook-codegen

NPM

npm install gql-hook-codegen

How to use

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

import gql from 'graphql-tag'

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

Step 2: Add schema file schema.gql

type User {
  id: ID!
  name: String
}

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

Step 3: Run the following code:

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

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

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 plugin and add the following code to .settings.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

1. Schema
2. Query
3. Query with no parameters
4. Batched Queries
5. Query with multiple inputs
6. Query with enum
7. Query with date
8. Query with shared variable
9. Mutation
10. Lazy query
11. Query with union

Options

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

COMMANDS

generate

COMMON

--help     Show help

--doc      Generate documentation

gql-hook-codegen generate

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