graphql-codegen-typescript-boilerplate

Minimal GraphQL tooling boilerplate with GraghQL Code Generator for Typescript that is easy to adapt and expand for any workflow.

Uses SpaceX GraphQL API 🚀 as an example endpoint. Replace env variables with your own endpoint and token if needed.

Main features 🔥

• GraghQL Code Generator configuration

  • Generates raw output for types and graphql operations for a more minimal approach
  • Generates TypedDocumentNode for use with most GraphQL clients
    • See libraries supporting TypedDocumentNode

• VSCode plugin config for GraphQL

  • GraphQL: Language Feature Support (GraphQL.vscode-graphql)
    • config in ./graphql.config.js
    • .env file support in config
  • GraphQL: Syntax Highlighting (GraphQL.vscode-graphql-syntax)

• Simple tesing environment to easily test generated graphql operations and types and expand to use GraphQL client libraries on top of TypedDocumentNode

Files and folders

• .env.example
  • environment variable example
• .nvmrc
  • nvm config
• codegen.yml
  • Config for @graphql-codegen/cli and related plugins
  • See codegen plugin related documentation in codegen.yml
• graphql.config.js
  • Config for VSCode plugin: GraphQL: Language Feature Support
• index.html
  • Easily test generated graphql code in browser environment with VSCode live server
• tsconfig.json
  • TypeScript compiler options. Should also work with default config as created by tsc --init.
• .vscode/extensions.json
  • recommended extension needed by this boilerplate
• src/index.ts
  • Inline GraphQL operation examples
  • Used by index.html
    • Easily test generated graphql operations and types
• src/generated
  • contains all code generated by codegen per endpoint
• src/gql-operations
  • GraphQL operations defined in .graphql files
• src/utils/fakeTag.ts
  • exports fake-tag that is used to wrap GraphQL string operations
    • since this project doesn't use a bundler, fake-tag is used here "inline"
• lib/
  • contains all files compiled by tsc

Usage

# Copy env file and replace
cp .env.example .env
# Set correct node and npm version
nvm use
# Install dependencies
npm ci
# Start codegen in watch mode
npm run codegen:watch
# Start TypeScript compiler in watch mode
npm run tsc:watch

Install VSCode plugins:

• GraphQL.vscode-graphql

  • GraphQL language features
  • How to configure
  • See open issues
  • working version 0.7.5

• GraphQL.vscode-graphql-syntax

  • GraphQL syntax highlighting

Made with passion by Nitro

We are a hybrid marketing agency ready to set your business on fire by bringing together marketing communication and digital services in a unique way. We love technology and we hope this bit of code makes your day. If you're ever in need of marketing/design/development expertise why not consider us at nitro.fi 😎.