https://github.com/jpb06/graphql-codegen-react-query
Generating react-query hooks and typescript types from a graphql schema
https://github.com/jpb06/graphql-codegen-react-query
codegen graphql react-query
Last synced: about 1 year ago
JSON representation
Generating react-query hooks and typescript types from a graphql schema
- Host: GitHub
- URL: https://github.com/jpb06/graphql-codegen-react-query
- Owner: jpb06
- License: mit
- Created: 2022-12-04T14:45:10.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-19T18:59:49.000Z (over 3 years ago)
- Last Synced: 2025-04-28T16:03:15.727Z (about 1 year ago)
- Topics: codegen, graphql, react-query
- Language: TypeScript
- Homepage:
- Size: 5.62 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# graphql-codegen-react-query
[](https://github.dev/jpb06/graphql-codegen-react-query)
[](https://sonarcloud.io/summary/new_code?id=jpb06_graphql-codegen-react-query)
[](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)
[](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)
[](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)
[](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)
[](https://sonarcloud.io/summary/new_code?id=jpb06_graphql-codegen-react-query)
[](https://sonarcloud.io/summary/new_code?id=jpb06_graphql-codegen-react-query)
[](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)
[](https://sonarcloud.io/summary/new_code?id=jpb06_graphql-codegen-react-query)
[](https://sonarcloud.io/summary/new_code?id=jpb06_graphql-codegen-react-query)
[](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)
Generating types and react-query hooks from a graphql schema.
## ⚡ Purpose
Graphql codegen is a great tool; zeus-graphql is a neat lib. But they don't exactly fit what I want 😿
> ### 🤔 I want to get clean typescript artifacts from my graphql schema
>
>### 🤔 I want type enforcing for args, params and results while using `useQuery` and `useMutation` hooks
>
>### 🤔 I want to easily import what I need from generated code
>
>### 🤔 When using a query, I want to pick what I want as result when I only need a subset of the query result
>
>### 🤔 But I also want to be able to easily pick everything if that's what I need
>
>### 🤔 I want to define which queries should be translated into infinite queries
So here we go, I just figured I'd do something for giggles 🤷.
## ⚡ What is generated exactly ?
## ⚡ Get started
### 🔶 Install
To install, use either pnpm, yarn or npm:
```bash
yarn add -D graphql-codegen-react-query
```
### 🔶 Setup
Let's setup our codegen tooling by running the `codegen-init` command:
```bash
yarn codegen-init
```
This command takes three optional parameters:
| Parameter | Description | Default value |
| ------------------------------------ | ---------------------------------------- | ----------------------------------- |
| c | Where to write the codegen config file | . (current folder) |
| o | Where generated code should be written | ./api |
| u | Graphql api url. If it doesn't start with `http`, the variable will be treated as an environment variable name | |
So if I need to use custom params, I'd do:
```bash
yarn gqlCodegen-init -c ./libs/graphql/codegen/src -o libs/graphql/artifacts/src/api -u NEXT_PUBLIC_GQL_API_URL
```
> 🗯️ This command generates two files:
>
> - The `react-query.codegen.yml` config file.
> - The fetcher hook. You might need to inject config in the fetching logic, like setting an `Authorization` header for example; that is why the fetching logic is externalized in this hook.
The config file typically looks like this:
```yaml
# Where generate code should be written
outputPath: 'libs/graphql/artifacts/src/api/codegen'
# The environment variable name containing the url to the graphql schema (or directly said url)
schemaUrl: NEXT_PUBLIC_GQL_API_URL
# Fetcher hook config
fetcher:
# Path to the fetcher, relative to the generated queries/mutations
path: './../../useFetchData'
# fetcher hook name (expecting a named export)
functionName: 'useFetchData'
# Queries that should be generated as infinite queries with react-query
infiniteQueries:
- useProductsByPage
```
### 🔶 Codegen
> 🚨 Make sure introspection is enabled on the backend you target
Generating types from a graphql schema is easy enough using cli. Usage is as follows:
```text
gqlCodegen -c [configFilePath]
Options:
--help Show help [boolean]
--version Show version number [boolean]
-c Codegen config file path
[required] [default: "./react-query.codegen.yml"]
Examples:
gqlCodegen -c ./libs/graphql/react-query.codegen.yml
```
With that in mind, we can add a script to our `package.json`:
```json
{
[...],
"scripts:" {
"codegen": "gqlCodegen -c ./libs/graphql/react-query.codegen.yml",
[...]
}
}
```
## ⚡ Features
### 🔶 Clean types
From a schema like this...
```graphql
enum GqlOrderedItemStatus {
preparing
readyToBeSent
shippingInProgress
shipped
}
type GqlOrderedItem {
id: ID!
quantity: Int!
name: String!
image: String
price: Float!
status: GqlOrderedItemStatus!
}
type GqlOrder {
id: ID!
idUser: ID!
idCreditCard: ID!
createdAt: DateTime!
creditCardNumber: String!
items: [GqlOrderedItem!]!
}
```
I expect to get this:
```typescript
export type GqlOrderedItemStatus = 'preparing' | 'readyToBeSent' | 'shippingInProgress' | 'shipped'
export interface GqlOrderedItem {
id: string;
quantity: number;
name: string;
image?: string;
price: number;
status: GqlOrderedItemStatus
}
export interface GqlOrder {
id: string;
idUser: string;
idCreditCard: string;
createdAt: Date;
creditCardNumber: string;
items: Array;
}
```
### 🔶 Dynamic selection and result type inference
> It would be great if I could use named query hooks (one react hook by graphql query) but still be able to select what I want in the result 🤔
For example, for a schema like this, I should have a named query hook `useCategoriesQuery` with type inference:
```graphql
type GqlProduct {
id: ID!
idCategory: ID!
name: String!
description: String!
image: String!
price: Float!
stock: Int!
}
type GqlCategoryWithProducts {
id: ID!
name: String!
products: [GqlProduct!]
}
type Query {
categories: [GqlCategoryWithProducts!]!
}
```
If i want the entire query result, I can use `useCategoriesQuery` instead of `useCategoriesPartialQuery`:
### 🔶 Dynamic queries
It would be neat if I could get the results from several graphql queries by calling one single react hook 🤔
Let's use the `useGqlQuery` hook that does just that:
### 🔶 Queries/Mutations variables type support
I would be nice if I had strong typings for arguments and results 🤔
### 🔶 Queries/Mutations options
It would be awesome if I could still easily tweak react query hooks 🤔
