https://github.com/rintoj/gql-hook-codegen
https://github.com/rintoj/gql-hook-codegen
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rintoj/gql-hook-codegen
- Owner: rintoj
- Created: 2021-05-23T01:41:46.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-28T12:17:38.000Z (about 2 years ago)
- Last Synced: 2024-10-23T03:30:44.933Z (over 1 year ago)
- Language: TypeScript
- Size: 503 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gql-hook-codegen
[](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.
## 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,
) {
return useQuery(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
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 [--help] [--doc]
COMMANDS
generate
COMMON
--help Show help
--doc Generate documentation
```
## gql-hook-codegen generate
```sh
gql-hook-codegen generate [--pattern=]
[--file=]
[--schema-file=]
[--schema-url=]
[--ignore=]
[--package=]
[--save]
OPTIONS
--pattern= File pattern
--file= A specific file to process
--schema-file= Location of the schema file
--schema-url= Url to fetch graphql schema from
--ignore= Folders to ignore
--package= 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 |