1. Project Overview & Quickstart (dotansimha/graphql-code-generator)
File: README.md
</a>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.
We currently support and maintain these 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.
Start by installing the basic deps of GraphQL Codegen:
pnpm add graphql
pnpm add -D @graphql-codegen/cliGraphQL Code Generator lets you setup everything by simply running the following command:
pnpm graphql-codegen initQuestion 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.
Links
Besides our docs page, feel free to go
through our published Medium articles to get a better grasp of what GraphQL Code Generator is all
about:
Contributing
If this is your first time contributing to this project, please do read our
Contributor Workflow Guide
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 as adopted
from Contributor Covenant
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.
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.
This simple codegen configuration generates types and helpers in the 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 (since1.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.
This simple codegen configuration generates types and helpers in the 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 (since1.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.
This simple codegen configuration generates types and helpers in the 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 devFile: 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 devFile: 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 startExplanation
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 themoduleResolution 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
- package.json type module - Node.js documentation
- Named Imports - import MDN documentation
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.
This simple codegen configuration generates types and helpers in the 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 (since1.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 withgraphql-request as a GraphQL Client.
You will find the TypeScript-based codegen configuration in codegen.ts.
This simple codegen configuration generates types and helpers in the 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 from5.0 as React Query fetcher.
For indications in writing your fetcher,
please refer to our documentation.
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.
Contributing
Please read CONTRIBUTING.md. Thank you ❤️
Local Setup
This project is built on Next.js. You can run it on your machine, provided you have Node 16+ and Yarn installed.
First, clone the repo:
git clone [email protected]:graphprotocol/docs.gitMake sure you are inside the folder:
cd docsInstall the dependencies:
yarnThen, run the project:
yarn devThat’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.