## 1. Project Overview & Quickstart (dotansimha/graphql-code-generator) ## File: README.md [](https://badge.fury.io/js/%40graphql-codegen%2Fcli) [https://the-guild.dev/graphql/codegen](https://the-guild.dev/graphql/codegen) GraphQL Code Generator is a tool that generates code out of your GraphQL schema. Whether you are developing a frontend or backend, you can utilize GraphQL Code Generator to generate output from your GraphQL Schema and GraphQL Documents (query/mutation/subscription/fragment). By analyzing the schema and documents and parsing it, GraphQL Code Generator can output code at a wide variety of formats, based on pre-defined templates or based on custom user-defined ones. Regardless of the language that you're using, GraphQL Code Generator has you covered. GraphQL Code Generator lets you choose the output that you need, based on _plugins_, which are very flexible and customizable. You can also write your _plugins_ to generate custom outputs that match your needs. You can try this tool live on your browser and see some useful examples. Check out [GraphQL Code Generator Live Examples](https://the-guild.dev/graphql/codegen/#live-demo). We currently support and maintain [these plugins](https://the-guild.dev/graphql/codegen/plugins) (TypeScript, Flow, React, Angular, MongoDB, Stencil, Reason, and some more), and there is an active community that writes and maintains custom plugins. ## Quick Start > You can find the complete instructions in > [GraphQL Code Generator website](https://the-guild.dev/graphql/codegen/docs/getting-started/installation). Start by installing the basic deps of GraphQL Codegen: ```bash pnpm add graphql pnpm add -D @graphql-codegen/cli ``` GraphQL Code Generator lets you setup everything by simply running the following command: ```bash pnpm graphql-codegen init ``` Question by question, it will guide you through the whole process of setting up a schema, selecting plugins, picking a destination of a generated file, and a lot more. If you wish to [manually setup codegen, follow these instructions](https://the-guild.dev/graphql/codegen/docs/getting-started/installation). ## Links Besides our [docs page](https://the-guild.dev/graphql/codegen/docs/getting-started), feel free to go through our published Medium articles to get a better grasp of what GraphQL Code Generator is all about: - [All available plugins & presets](https://the-guild.dev/graphql/codegen/plugins) ## Contributing If this is your first time contributing to this project, please do read our [Contributor Workflow Guide](https://github.com/the-guild-org/Stack/blob/master/CONTRIBUTING.md) before you get started off. Feel free to open issues and pull requests. We're always welcome support from the community. For a contribution guide specific to this project, please refer to: http://the-guild.dev/graphql/codegen/docs/custom-codegen/contributing. ## Code of Conduct Help us keep GraphQL Code Generator open and inclusive. Please read and follow our [Code of Conduct](https://github.com/the-guild-org/Stack/blob/master/CODE_OF_CONDUCT.md) as adopted from [Contributor Covenant](https://contributor-covenant.org) ## License [](https://raw.githubusercontent.com/apollostack/apollo-ios/master/LICENSE) MIT --- ## File: examples/yoga-tests/README.md # Yoga Testing Setup Example for executing typed GraphQL operations against your Yoga instance within tests using GraphQL Code Generator. [Learn more about Yoga - The GraphQL Server.](https://the-guild.dev/graphql/yoga-server) ## Usage Run `pnpm codegen --watch` for starting GraphQL Code Generator in watch mode. Run `pnpm test` for running a tests located within `yoga.spec.ts`. --- ## File: examples/vue/villus/README.md # Using GraphQL Code Generator with Villus and Vue 3 This example illustrates using GraphQL Code Generator in a Vue 3 application using the Villus GraphQL Client. You will find the TypeScript-based codegen configuration in [`codegen.ts`](./codegen.ts). This simple codegen configuration generates types and helpers in the [`src/gql`](./src/gql/) folder that help you to get typed GraphQL Queries and Mutations seamlessly ⚡️ For a step-by-step implementation tutorial, please refer to the related guide: https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue-angular -- Please note that the `client` preset used in this example is compatible with `villus` (since `1.0.0-beta.8`). --- ## File: examples/vue/urql/README.md # Using GraphQL Code Generator with URQL and Vue 3 This example illustrates using GraphQL Code Generator in a Vue 3 application using the URQL GraphQL Client. You will find the TypeScript-based codegen configuration in [`codegen.ts`](./codegen.ts). This simple codegen configuration generates types and helpers in the [`src/gql`](./src/gql/) folder that help you to get typed GraphQL Queries and Mutations seamlessly ⚡️ For a step-by-step implementation tutorial, please refer to the related guide: https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue-angular -- Please note that the `client` preset used in this example is compatible with `@urql/vue` (since `1.11.0`). --- ## File: examples/vue/apollo-composable/README.md # Using GraphQL Code Generator with Apollo Composable and Vue 3 This example illustrates using GraphQL Code Generator in a Vue 3 application using the Apollo Composable GraphQL Client. You will find the TypeScript-based codegen configuration in [`codegen.ts`](./codegen.ts). This simple codegen configuration generates types and helpers in the [`src/gql`](./src/gql/) folder that help you to get typed GraphQL Queries and Mutations seamlessly ⚡️ For a step-by-step implementation tutorial, please refer to the related guide: https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue-angular -- Please note that the `client` preset used in this example is compatible with `@vue/apollo-composable` (since `4.0.0-alpha.13`). --- ## File: examples/typescript-resolvers/README.md # Typescript Resolvers Example This example showcases how to use GraphQL Code Generator for building a type-safe GraphQL schema utilizing the schema definition language first workflow. ## Usage ``` # generate code pnpm codegen # run the server pnpm dev ``` --- ## File: examples/typescript-graphql-request/README.md # GraphQL Request Example This example showcases how to use GraphQL Code Generator for building a type-safe GraphQL schema utilizing the schema definition language first workflow. ## Usage ``` # generate code pnpm codegen # run the server pnpm dev ``` --- ## File: examples/typescript-esm/README.md # GraphQL Code Generator usage with TypeScript and ESM ## Usage ``` # generate code pnpm codegen # run tsc pnpm build # run the tsc output pnpm start ``` ## Explanation In ESM the file extension must be appended to named imports. This can be achieved by setting the codegen config `importExtension` to `'.js'` or `'.ts'` (see `codegen.yml`). TypeScript introduced a new module resolution algorithm for ESM in version 4.7. We set the `moduleResolution` to `node16` and the (output) module type to `node16` (see `tsconfig.json`). Additionally, within the `package.json` we specify the `type` property with the value `module` in order to instruct Node.js, bundlers and other tools that all `.js` files within this folder should be treated as ESM modules. ## Useful resources - [ECMAScript Module Support in Node.js - TypeScript 4.7 Changelog](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#ecmascript-module-support-in-node-js) - [package.json type module - Node.js documentation](https://nodejs.org/api/packages.html#type) - [Named Imports - import MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import) --- ## File: examples/react/urql/README.md # Using GraphQL Code Generator with URQL and React This example illustrates using GraphQL Code Generator in a React application using the URQL GraphQL Client. You will find the TypeScript-based codegen configuration in [`codegen.ts`](./codegen.ts). This simple codegen configuration generates types and helpers in the [`src/gql`](./src/gql/) folder that help you to get typed GraphQL Queries and Mutations seamlessly ⚡️ For a step-by-step implementation tutorial, please refer to the related guide: https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue-angular -- Please note that the `client` preset used in this example is compatible with `@urql/core` (since `1.15.0`), `@urql/preact` (since `1.4.0`) and `urql` (since `1.11.0`). --- ## File: examples/react/tanstack-react-query/README.md # Using GraphQL Code Generator with React Query and React This example illustrates using GraphQL Code Generator in a React application using React Query with `graphql-request` as a GraphQL Client. You will find the TypeScript-based codegen configuration in [`codegen.ts`](./codegen.ts). This simple codegen configuration generates types and helpers in the [`src/gql`](./src/gql/) folder that help you to get typed GraphQL Queries and Mutations seamlessly ⚡️ For a step-by-step implementation tutorial, please refer to the related guide: https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue-angular -- Please note that the `client` preset used in this example is compatible with `graphql-request` from `5.0` as React Query fetcher. For indications in writing your fetcher, [please refer to our documentation](https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue-angular#appendix-i-react-query-with-a-custom-fetcher-setup). ## 2. Official Technical Reference & Guides (dotansimha/docs) # The Graph Docs This is the source code for The Graph’s documentation, accessible at [https://thegraph.com/docs](https://thegraph.com/docs). ## Contributing Please read [`CONTRIBUTING.md`](https://github.com/graphprotocol/docs/blob/main/CONTRIBUTING.md). Thank you ❤️ ## Local Setup This project is built on [Next.js](https://nextjs.org/). You can run it on your machine, provided you have [Node 16+](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com) installed. First, clone the repo: ```bash git clone git@github.com:graphprotocol/docs.git ``` Make sure you are inside the folder: ```bash cd docs ``` Install the dependencies: ```bash yarn ``` Then, run the project: ```bash yarn dev ``` That’s it! Go to http://localhost:3000 to see it in action. Any change you make to a file in `pages` should be refreshed automatically in your browser.