{"id":19972583,"url":"https://github.com/jpb06/graphql-codegen-react-query","last_synced_at":"2025-05-04T01:30:54.894Z","repository":{"id":64940859,"uuid":"574137478","full_name":"jpb06/graphql-codegen-react-query","owner":"jpb06","description":"Generating react-query hooks and typescript types from a graphql schema","archived":false,"fork":false,"pushed_at":"2023-04-19T18:59:49.000Z","size":5894,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-28T16:03:15.727Z","etag":null,"topics":["codegen","graphql","react-query"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jpb06.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-04T14:45:10.000Z","updated_at":"2024-04-26T14:27:28.000Z","dependencies_parsed_at":"2024-10-20T11:38:56.914Z","dependency_job_id":null,"html_url":"https://github.com/jpb06/graphql-codegen-react-query","commit_stats":{"total_commits":38,"total_committers":3,"mean_commits":"12.666666666666666","dds":0.4736842105263158,"last_synced_commit":"c36ad7251864296eed6547ac04638340cf0b31d3"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fgraphql-codegen-react-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fgraphql-codegen-react-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fgraphql-codegen-react-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb06%2Fgraphql-codegen-react-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpb06","download_url":"https://codeload.github.com/jpb06/graphql-codegen-react-query/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252276955,"owners_count":21722447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codegen","graphql","react-query"],"created_at":"2024-11-13T03:08:36.819Z","updated_at":"2025-05-04T01:30:50.808Z","avatar_url":"https://github.com/jpb06.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# graphql-codegen-react-query\n\n[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode\u0026label=\u0026message=Open%20in%20Visual%20Studio%20Code\u0026labelColor=2c2c32\u0026color=007acc\u0026logoColor=007acc)](https://github.dev/jpb06/graphql-codegen-react-query)\n![npm bundle size](https://img.shields.io/bundlephobia/min/graphql-codegen-react-query)\n![Github workflow](https://img.shields.io/github/actions/workflow/status/jpb06/graphql-codegen-react-query/tests-scan.yml?branch=main\u0026label=Tests\u0026logo=github-actions)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=jpb06_graphql-codegen-react-query)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=sqale_rating)](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=security_rating)](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=reliability_rating)](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=coverage)](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)\n[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=ncloc)](https://sonarcloud.io/summary/new_code?id=jpb06_graphql-codegen-react-query)\n[![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=jpb06_graphql-codegen-react-query)\n[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=code_smells)](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=bugs)](https://sonarcloud.io/summary/new_code?id=jpb06_graphql-codegen-react-query)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=jpb06_graphql-codegen-react-query)\n![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/graphql-codegen-react-query?label=snyk%20vulnerabilities)\n[![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=jpb06_graphql-codegen-react-query\u0026metric=duplicated_lines_density)](https://sonarcloud.io/dashboard?id=jpb06_graphql-codegen-react-query)\n![Last commit](https://img.shields.io/github/last-commit/jpb06/graphql-codegen-react-query?logo=git)\n\nGenerating types and react-query hooks from a graphql schema.\n\n\u003c!-- readme-package-icons start --\u003e\n\n\u003cp align=\"left\"\u003e\u003ca href=\"https://docs.github.com/en/actions\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/GithubActions-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://www.typescriptlang.org/docs/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/TypeScript.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://nodejs.org/en/docs/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/NodeJS-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://pnpm.io/motivation\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Pnpm-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://axios-http.com/fr/docs/intro\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Axios-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://github.com/conventional-changelog\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/CommitLint.Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://github.com/motdotla/dotenv#readme\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Dotenv-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://eslint.org/docs/latest/\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Eslint-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://jestjs.io/docs/getting-started\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Jest.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://prettier.io/docs/en/index.html\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Prettier-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://reactjs.org/docs/getting-started.html\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/React-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://tanstack.com/query/v4/docs/overview\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/ReactQuery-Dark.svg\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://swc.rs/docs/getting-started\" target=\"_blank\"\u003e\u003cimg height=\"50\" src=\"https://raw.githubusercontent.com/jpb06/jpb06/master/icons/Swc-Dark.svg\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003c!-- readme-package-icons end --\u003e\n\n## ⚡ Purpose\n\nGraphql codegen is a great tool; zeus-graphql is a neat lib. But they don't exactly fit what I want 😿\n\n\u003e ### 🤔 I want to get clean typescript artifacts from my graphql schema\n\u003e\n\u003e### 🤔 I want type enforcing for args, params and results while using `useQuery` and `useMutation` hooks\n\u003e\n\u003e### 🤔 I want to easily import what I need from generated code\n\u003e\n\u003e### 🤔 When using a query, I want to pick what I want as result when I only need a subset of the query result\n\u003e\n\u003e### 🤔 But I also want to be able to easily pick everything if that's what I need\n\u003e\n\u003e### 🤔 I want to define which queries should be translated into infinite queries\n\nSo here we go, I just figured I'd do something for giggles 🤷.\n\n## ⚡ What is generated exactly ?\n\n![codegen step](./assets/gql-codegen.png)\n\n## ⚡ Get started\n\n### 🔶 Install\n\nTo install, use either pnpm, yarn or npm:\n\n```bash\nyarn add -D graphql-codegen-react-query\n```\n\n### 🔶 Setup\n\nLet's setup our codegen tooling by running the `codegen-init` command:\n\n```bash\nyarn codegen-init\n```\n\nThis command takes three optional parameters:\n\n| Parameter                          | Description                               | Default value                             |\n| ------------------------------------ | ---------------------------------------- | ----------------------------------- |\n| c                  | Where to write the codegen config file              | . (current folder) |\n| o            | Where generated code should be written                 | ./api    |\n| u | Graphql api url. If it doesn't start with `http`, the variable will be treated as an environment variable name                 | \u003chttp://localhost:3333/graphql\u003e    |\n\nSo if I need to use custom params, I'd do:\n\n```bash\nyarn gqlCodegen-init -c ./libs/graphql/codegen/src -o libs/graphql/artifacts/src/api -u NEXT_PUBLIC_GQL_API_URL\n```\n\n\u003e 🗯️ This command generates two files:\n\u003e\n\u003e - The `react-query.codegen.yml` config file.\n\u003e - 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.\n\nThe config file typically looks like this:\n\n```yaml\n# Where generate code should be written\noutputPath: 'libs/graphql/artifacts/src/api/codegen'\n# The environment variable name containing the url to the graphql schema (or directly said url)\nschemaUrl: NEXT_PUBLIC_GQL_API_URL\n# Fetcher hook config\nfetcher:\n  # Path to the fetcher, relative to the generated queries/mutations\n  path: './../../useFetchData'\n  # fetcher hook name (expecting a named export)\n  functionName: 'useFetchData'\n# Queries that should be generated as infinite queries with react-query\ninfiniteQueries:\n  - useProductsByPage\n\n```\n\n### 🔶 Codegen\n\n\u003e 🚨 Make sure introspection is enabled on the backend you target\n\nGenerating types from a graphql schema is easy enough using cli. Usage is as follows:\n\n```text\ngqlCodegen -c [configFilePath]\n\nOptions:\n      --help     Show help                                             [boolean]\n      --version  Show version number                                   [boolean]\n  -c             Codegen config file path\n                               [required] [default: \"./react-query.codegen.yml\"]\n\nExamples:\n  gqlCodegen -c ./libs/graphql/react-query.codegen.yml\n```\n\nWith that in mind, we can add a script to our `package.json`:\n\n```json\n{\n  [...],\n  \"scripts:\" {\n    \"codegen\": \"gqlCodegen -c ./libs/graphql/react-query.codegen.yml\",\n    [...]\n  }\n}\n```\n\n## ⚡ Features\n\n### 🔶 Clean types\n\nFrom a schema like this...\n\n```graphql\nenum GqlOrderedItemStatus {\n  preparing\n  readyToBeSent\n  shippingInProgress\n  shipped\n}\ntype GqlOrderedItem {\n  id: ID!\n  quantity: Int!\n  name: String!\n  image: String\n  price: Float!\n  status: GqlOrderedItemStatus!\n}\ntype GqlOrder {\n  id: ID!\n  idUser: ID!\n  idCreditCard: ID!\n  createdAt: DateTime!\n  creditCardNumber: String!\n  items: [GqlOrderedItem!]!\n}\n```\n\nI expect to get this:\n\n```typescript\nexport type GqlOrderedItemStatus = 'preparing' | 'readyToBeSent' | 'shippingInProgress' | 'shipped'\n\nexport interface GqlOrderedItem {\n  id: string;\n  quantity: number;\n  name: string;\n  image?: string;\n  price: number;\n  status: GqlOrderedItemStatus\n}\nexport interface GqlOrder {\n  id: string;\n  idUser: string;\n  idCreditCard: string;\n  createdAt: Date;\n  creditCardNumber: string;\n  items: Array\u003cGqlOrderedItem\u003e;\n}\n```\n\n### 🔶 Dynamic selection and result type inference\n\n\u003e 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 🤔\n\nFor example, for a schema like this, I should have a named query hook `useCategoriesQuery` with type inference:\n\n```graphql\ntype GqlProduct {\n  id: ID!\n  idCategory: ID!\n  name: String!\n  description: String!\n  image: String!\n  price: Float!\n  stock: Int!\n}\n\ntype GqlCategoryWithProducts {\n  id: ID!\n  name: String!\n  products: [GqlProduct!]\n}\n\n\ntype Query {\n  categories: [GqlCategoryWithProducts!]!\n}\n```\n\n![dynamic selection](./assets/dynamic-selection.gif)\n\nIf i want the entire query result, I can use `useCategoriesQuery` instead of `useCategoriesPartialQuery`:\n\n![dynamic selection](./assets/full-query.gif)\n\n### 🔶 Dynamic queries\n\nIt would be neat if I could get the results from several graphql queries by calling one single react hook 🤔\n\nLet's use the `useGqlQuery` hook that does just that:\n\n![dynamic selection](./assets/dynamic-query.gif)\n\n### 🔶 Queries/Mutations variables type support\n\nI would be nice if I had strong typings for arguments and results 🤔\n\n![dynamic selection](./assets/mutation-args-result.gif)\n\n### 🔶 Queries/Mutations options\n\nIt would be awesome if I could still easily tweak react query hooks 🤔\n\n![dynamic selection](./assets/query-args-options.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpb06%2Fgraphql-codegen-react-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpb06%2Fgraphql-codegen-react-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpb06%2Fgraphql-codegen-react-query/lists"}