Codegen
Codegen
  • Plugins
Contact us
Docs
    • Introduction
    • Installation
    • Development workflow
    • ESM TypeScript usage
    • Vanilla TypeScript
    • React Query
    • React / Vue
    • Angular
    • Svelte / Kit
    • Dart/Flutter
    • Apollo Server / GraphQL Yoga
    • Apollo Server / GraphQL Yoga with Server Preset
    • API Testing
    • GraphQL Modules
    • Further Reading
    • codegen.ts
    • schema field
    • documents field
    • plugin config
    • require field
    • Naming Convention
    • Lifecycle Hooks
    • Multi Project
    • Generated files colocation
    • Programmatic Usage
    • How does it work?
    • Profiler
    • Document Transform
    • VSCode Extension
    • Prettier & Linters
    • Apollo Federation
    • apollo-local-state
    • create-react-app
    • Gatsby
    • What are Plugins?
    • Plugin structure
    • Validate Configuration
    • Extend Schema
    • Using Visitor Pattern
    • Contributing
    • GraphQL-CLI Deprecation
    • v0.18 -> v1.0
    • v0.13 -> v0.17
    • v4.0 -> v5.0
Question? Give us feedback →Edit this page on GitHub
DocumentationIntegrationscreate-react-app

Create-React-App

Since v2 of Create-React-App, you can use TypeScript without the need to eject from the basic scripts packages.

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'http://my-server/graphql',
  documents: 'src/**/*.graphql',
  generates: {
    'components.tsx': {
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo']
    }
  }
}
export default config
apollo-local-stateGatsby
Codegen

End-to-end type safety

Products

  • Hive
  • Hive Gateway
  • Yoga
  • Mesh
  • Codegen
  • Inspector
  • Envelop
  • SOFA
  • Scalars
  • GraphQL ESLint

Developer

  • Documentation
  • Hive Status
  • Hive Updates
  • Blog

Company

  • About
  • Brand Assets
  • Newsletter
OSS FriendsPricingContact Us
Cloud Security Alliance Star Level One Badge
GitHubDiscord

© 2025 The Guild