### Install and start dev-test-apollo-tooling

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/dev-test/apollo-tooling/README.md

Navigate to the dev-test-apollo-tooling directory and run these commands to install dependencies and start the generation. This will generate type files in dev-test-apollo-tooling/src/__generated__/*.

```bash
cd dev-test-apollo-tooling pnpm install pnpm start
```

--------------------------------

### Install chosen packages after initialization

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/getting-started/installation.mdx

After running the initialization wizard, install the packages you selected. This command installs the dependencies chosen during the interactive setup.

```sh
npm install
```

--------------------------------

### Run GraphQL Code Generator initialization wizard

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/getting-started/installation.mdx

Start the interactive initialization wizard to configure your project. It will guide you through setting up a schema, selecting plugins, and choosing an output destination.

```sh
npx graphql-code-generator init
```

--------------------------------

### Using the generated SDK with GraphQLClient

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/typescript/typescript-graphql-request.mdx

Shows how to import the generated SDK and wrap a GraphQLClient instance to get a fully-typed SDK. The example creates a client, gets the SDK, and calls the continents query, logging the result.

```ts
import { GraphQLClient } from 'graphql-request'
import { getSdk } from './sdk' // THIS FILE IS THE GENERATED FILE

async function main() {
  const client = new GraphQLClient('https://countries.trevorblades.com')
  const sdk = getSdk(client)
  const { continents } = await sdk.continents() // This is fully typed, based on the query

  console.log(`GraphQL data:`, continents)
}
```

--------------------------------

### Run development server with pnpm

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/examples/react/apollo-client-swc-plugin/README.md

Starts the Vite development server using pnpm. This is the primary command for running the example project.

```bash
pnpm dev
```

--------------------------------

### Usage Commands for GraphQL Request Example

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/examples/typescript-graphql-request/README.md

Run these commands in the terminal to generate code and start the server. First, execute 'pnpm codegen' to generate the GraphQL code, then 'pnpm dev' to run the development server.

```bash
# generate code
pnpm codegen
# run the server
pnpm dev
```

--------------------------------

### Basic Visitor Setup

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/custom-codegen/using-visitor.mdx

Initial setup to extract the AST node from the GraphQLSchema using getCachedDocumentNodeFromSchema.

```js
const { getCachedDocumentNodeFromSchema } = require('@graphql-codegen/plugin-helpers')

module.exports = {
  plugin(schema, documents, config) {
    const astNode = getCachedDocumentNodeFromSchema(schema) // Transforms the GraphQLSchema into ASTNode
  }
}
```

--------------------------------

### Install KitQL client and codegen plugin

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/svelte.mdx

Install the KitQL client and codegen plugin as dev dependencies.

```sh
npm i @kitql/client
npm i -D @kitql/graphql-codegen
```

--------------------------------

### Install graphql-yoga

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/api-testing.mdx

Install the GraphQL Yoga server as a runtime dependency.

```sh
npm i graphql-yoga
```

--------------------------------

### Install with pnpm

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/packages/presets/swc-plugin/README.md

Install the plugin as a dev dependency using pnpm.

```bash
pnpm add -D @graphql-codegen/client-preset-swc-plugin
```

--------------------------------

### package.json for Java codegen setup

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/partials/java-installation.mdx

Defines a package.json that installs the GraphQL Code Generator CLI and runs it after yarn install. Replace RELEVANT_PLUGIN with the desired plugin name.

```json
{
  "name": "java-app",
  "scripts": {
    "postinstall": "graphql-codegen"
  },
  "dependencies": {
    "graphql": "14.5.8",
    "@graphql-codegen/cli": "1.7.0",
    "@graphql-codegen/RELEVANT_PLUGIN": "1.7.0"
  }
}
```

--------------------------------

### Install server preset

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/graphql-server-apollo-yoga-with-server-preset.mdx

Install the required npm packages: @graphql-codegen/cli and @eddeee888/gcg-typescript-resolver-files as dev dependencies.

```sh
npm i -D @graphql-codegen/cli @eddeee888/gcg-typescript-resolver-files
```

--------------------------------

### Install SWC plugin

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/presets/preset-client.mdx

Install the SWC plugin package @swc-contrib/plugin-graphql-codegen-client-preset as a dev dependency. This package is not bundled with client-preset and must be installed separately.

```sh
npm i -D @swc-contrib/plugin-graphql-codegen-client-preset
```

--------------------------------

### GraphQL query for infinite query example

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/typescript/typescript-react-query.mdx

GraphQL query used in the infinite query example. It queries cats and dogs with range and starting parameters.

```graphql
query AnimalsQuery($catsRange: Int, $catsStarting: Int, $dogsRange: Int, $dogsStarting: Int) {
  cats(range: $catsRange, starting: $catsStarting) {
    # …
  }
  dogs(range: $dogsRange, starting: $dogsStarting) {
    # …
  }
}
```

--------------------------------

### GraphQL mutation with @oclif directive for descriptions and examples

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/typescript/typescript-oclif.mdx

Use this GraphQL mutation to define a command with a description and multiple examples via the @oclif directive. The directive is stripped before sending to the server. Multiple examples require separate 'example' keys, not an 'examples' array.

```graphql
mutation CreateAuthor($name: String!)
@oclif(
  description: "Create a new author"
  example: "cli author:create --name Alice"
  example: "cli author:create --name Bob"
) {
  createAuthor(input: { name: $name }) {
    name
  }
}
```

--------------------------------

### Install get-graphql-schema and download schema

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/flutter-freezed.mdx

Install the get-graphql-schema CLI globally and download your GraphQL schema to schema.graphql at the project root.

```sh
npm install -g get-graphql-schema

get-graphql-schema https://your-graphql-endpoint > schema.graphql
```

--------------------------------

### Install Nhost JavaScript SDK

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/typescript/typescript-nhost.mdx

Install the @nhost/nhost-js package to use the generated schema with the Nhost client.

```sh
npm i --save @nhost/nhost-js
```

--------------------------------

### GraphQL Modules with typed resolvers

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/getting-started/index.mdx

Shows the project structure for a GraphQL Modules setup and an example of a module resolver file using the generated UsersModule.Resolvers type. The resolver only implements types and fields defined in the module.

```plaintext
- src/
  - modules/
    - user/
      - resolvers.ts
      - typedefs/
        - user.graphql
    - product/
      - resolvers.ts
      - typedefs/
        - product.graphql
```

```ts
import { UsersModule } from './generated-types/module-types'

export const resolvers: UsersModule.Resolvers = {
  // Here, you can implement only the types and fields defined in your module!
}
```

--------------------------------

### Using external modules with namingConvention

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/config-reference/naming-convention.mdx

Shows the syntax for using any installed package as a naming function, with an example using lodash's camelCase.

```ts
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  config: { namingConvention: 'lodash#camelCase' }
  // ...
}
export default config
```

--------------------------------

### Install dependencies and build in monorepo root

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/dev-test/apollo-tooling/README.md

Run this command in the monorepo root to clean, install, and build the project. This is a prerequisite before patching near-operation-file.

```bash
pnpm clean && pnpm install && pnpm build
```

--------------------------------

### Install dependencies with npm

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/java/java-apollo-android.mdx

Run these commands in your Android project to initialize npm and install GraphQL and the GraphQL Code Generator CLI and java-apollo-android plugin.

```sh
npm init --yes
npm install graphql
npm install -D @graphql-codegen/cli @graphql-codegen/java-apollo-android
```

--------------------------------

### Install GraphQL Modules preset and dependencies

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/graphql-modules.mdx

Install the required packages for the GraphQL Modules preset using npm.

```sh
npm i -D @graphql-codegen/graphql-modules-preset @graphql-codegen/typescript-resolvers @graphql-codegen/typescript
```

--------------------------------

### Install dependencies

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/angular.mdx

Install the required packages: graphql, typescript, @graphql-codegen/cli, @graphql-codegen/typescript, @graphql-codegen/typescript-operations, and @graphql-codegen/typescript-apollo-angular.

```sh
npm i graphql
npm i -D typescript
npm i -D @graphql-codegen/cli
npm i -D @graphql-codegen/typescript
npm i -D @graphql-codegen/typescript-operations
npm i -D @graphql-codegen/typescript-apollo-angular
```

--------------------------------

### Install near-operation-file preset (npm2yarn)

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/advanced/generated-files-colocation.mdx

Installs the @graphql-codegen/near-operation-file-preset package as a dev dependency.

```sh
npm i -D @graphql-codegen/near-operation-file-preset
```

--------------------------------

### Install GraphQL Code Generator packages (After)

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/migration/apollo-tooling.mdx

Install the core CLI, the TypeScript operations plugin, and the near-operation-file preset as dev dependencies.

```sh
npm i -D @graphql-codegen/cli @graphql-codegen/typescript-operations @graphql-codegen/near-operation-file-preset
```

--------------------------------

### Install dependencies with npm

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/java/kotlin.mdx

Run in your Android project to initialize npm and install GraphQL and the Kotlin plugin packages. Requires Node.js 10 or later and NPM or Yarn.

```sh
npm init --yes
npm install graphql
npm install -D @graphql-codegen/cli @graphql-codegen/kotlin
```

--------------------------------

### Install dependencies with pnpm

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/custom-codegen/contributing.mdx

Run this command in the root directory to install all dependencies for the monorepo. Re-run it after making changes or adding packages to keep the monorepo structure intact.

```sh
pnpm i
```

--------------------------------

### Install GraphQL codegen and Nhost plugin

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/typescript/typescript-nhost.mdx

Install the required packages for GraphQL Code Generator and the typescript-nhost plugin.

```sh
npm i --save-dev @graphql-codegen/cli @graphql-codegen/typescript-nhost
```

--------------------------------

### Install GraphQL Code Generator packages

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/react-vue.mdx

Install required packages for most GraphQL clients and frameworks (React, Vue).

```sh
npm install graphql @graphql-typed-document-node/core
npm install --save-dev typescript @graphql-codegen/cli @parcel/watcher
```

--------------------------------

### Install graphql-code-generator and flutter-freezed plugin

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/flutter-freezed.mdx

Install the required npm packages: graphql, typescript, @graphql-codegen/cli, and @graphql-codegen/flutter-freezed.

```sh
npm i graphql
npm i -D typescript @graphql-codegen/cli @graphql-codegen/flutter-freezed
```

--------------------------------

### Install development dependencies

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/api-testing.mdx

Install TypeScript, ts-node, GraphQL Code Generator CLI, Jest, Babel presets, and related packages as development dependencies.

```sh
npm i -D typescript ts-node @graphql-codegen/cli jest @babel/core @babel/preset-env @babel/preset-typescript babel-jest @graphql-typed-document-node/core
```

--------------------------------

### Install graphql-codegen-svelte-apollo plugin

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/svelte.mdx

Install the community plugin and required GraphQL Code Generator packages via npm.

```sh
npm i -D graphql-codegen-svelte-apollo @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/cli typescript graphql
```

--------------------------------

### C# operations example with GraphQLHttpClient

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/c-sharp/c-sharp-operations.mdx

Shows how to use the generated C# methods with GraphQL.Client. Requires the GraphQL.Client and GraphQL.Client.Serializer.Newtonsoft packages. The example creates a GraphQLHttpClient and sends a query using the generated UsersGQL.Request() method.

```csharp
using GraphQL.Client.Http;
using GraphQL.Client.Serializer.Newtonsoft;

  ...
  using var client = new GraphQLHttpClient("https://gqlserver", new NewtonsoftJsonSerializer());
  var response = await client.SendQueryAsync<Types.Query>(UsersGQL.Request());
```

--------------------------------

### Example handler.ts with graphql-request

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/typescript/typescript-oclif.mdx

Example handler using graphql-request. It sends the query with variables and logs the result or errors via the command object. Export it as the default export; this file is not modified by codegen.

```ts
import { GraphQLClient } from 'graphql-request'
import { Command } from '@oclif/command'

interface QueryHandlerProps {
  command: Command
  query: string
  variables?: Record<string, any>
}

// Change the URL to the endpoint your CLI will use
const client = new GraphQLClient('http://localhost:4000')

const handler = ({ command, query, variables }: QueryHandlerProps) => {
  return client.request(query, variables).then(command.log).catch(command.error)
}

export default handler
```

--------------------------------

### Multi-file setup: codegen.ts with typescript plugin and import-types preset

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/migration/operations-and-client-preset-from-5-0.mdx

Shows the old multi-file setup using the typescript plugin for base types and the import-types preset to reuse them across projects. This is the previous approach before the decoupling.

```typescript
const config: CodegenConfig = {
  // ...
  generates: {
    'src/graphql/base-types.generated.ts': {
      plugins: ['typescript']
    },
    'src/project-1/types.generated.ts': {
      documents: 'src/project-1/**/*.graphql.ts',
      preset: 'import-types',
      plugins: ['typescript-operations'],
      presetConfig: {
        typesPath: '../graphql/base-types.generated.ts'
      }
    },
    'src/project-2/types.generated.ts': {
      documents: 'src/project-2/**/*.graphql.ts',
      preset: 'import-types',
      plugins: ['typescript-operations'],
      presetConfig: {
        typesPath: '../graphql/base-types.generated.ts'
      }
    }
  }
}
```

--------------------------------

### Install @graphql-codegen/typescript-resolvers

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/graphql-server-apollo-yoga.mdx

Install the required GraphQL Code Generator packages: CLI, typescript-resolvers, and typescript. Use npm or yarn as shown.

```sh
npm i -D @graphql-codegen/cli @graphql-codegen/typescript-resolvers @graphql-codegen/typescript
```

--------------------------------

### package.json scripts with prestart and predev

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/getting-started/development-workflow.mdx

Defines npm scripts in package.json so codegen runs before starting the server or app. The prestart and predev scripts invoke pnpm generate, ensuring generated output is up to date before each dev or start command.

```json
{
  "scripts": {
    "dev": "nodemon app.js",
    "start": "node app.js",
    "generate": "graphql-codegen",
    "prestart": "pnpm generate",
    "predev": "pnpm generate"
  }
}
```

--------------------------------

### Schema: schema.graphql

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/angular.mdx

Example GraphQL schema with Author, Post, and Query types used to demonstrate the generated services.

```graphql
type Author {
  id: Int!
  firstName: String!
  lastName: String!
  posts(findTitle: String): [Post]
}

type Post {
  id: Int!
  title: String!
  author: Author
}

type Query {
  posts: [Post]
}
```

--------------------------------

### Example GraphQL schema with GetUser query and SetUsername mutation

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/typescript/typescript-msw.mdx

Assumed schema for the usage examples below. Defines a getUser query and a setEmail mutation.

```graphql
query GetUser($id: ID!) {
  GetUser(id: $id) {
    name
    email
    id
  }
}

mutation SetUsername($id: ID!, $name: String!) {
  SetUsername(id: $id, name: $name) {
    id
    name
  }
}
```

--------------------------------

### Install GraphQL Code Generator dependencies

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/getting-started/installation.mdx

Install the core `graphql` and `@graphql-codegen/cli` packages, along with TypeScript as a dev dependency. Run these commands in your project root to set up the required dependencies.

```sh
npm i graphql
npm i -D typescript @graphql-codegen/cli
```

--------------------------------

### Multi-file setup: codegen.ts with typescript-operations and importSchemaTypesFrom

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/migration/operations-and-client-preset-from-5-0.mdx

New multi-file setup using only typescript-operations with generateOperationTypes: false and importSchemaTypesFrom to reuse base types across projects. The base project parses all GraphQL documents to generate shared Input and Enum types.

```typescript
const config: CodegenConfig = {
  // ...
  generates: {
    'src/graphql/base-types.generated.ts': {
      documents: 'src/**/*.graphql.ts', // Parses all files with GraphQL documents to generate Enum and Input types that are used by every project
      plugins: ['typescript-operations'],
      config: {
        generateOperationTypes: false, // `generateOperationTypes:false` means only Input, Enum and shared utility types are generated
      }
    },
    'src/project-1/types.generated.ts': {
      documents: 'src/project-1/**/*.graphql.ts', // Only parses GraphQL documents within project-1's scope
      plugins: ['typescript-operations'],
      config: {
        importSchemaTypesFrom: 'src/shared/base-types.generated.ts', // this path is relative to Codegen config location (unlike `typesPath` in the old setup)
      }
    },
    'src/project-2/types.generated.ts': {
      documents: 'src/project-2/**/*.graphql.ts', // Only parses GraphQL documents within project-2's scope
      plugins: ['typescript-operations'],
      config: {
        importSchemaTypesFrom: 'src/shared/base-types.generated.ts',
      },
    }
  }
}
```

--------------------------------

### dotenv example: .env file and config usage

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/config-reference/require-field.mdx

Shows a `.env` file with `SCHEMAURL` and `APIKEY`, and a config that reads them via `process.env`. The callout warns that env values may be saved in generated output.

```text
SCHEMAURL=https://example.com/graphql
APIKEY=ABC123
```

```ts
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: {
    [process.env.SCHEMAURL]: {
      headers: {
        apikey: process.env.APIKEY
      }
    }
  }
  // ...
}

export default config
```

--------------------------------

### Example with urql using persistedExchange

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/presets/preset-client.mdx

Shows how to configure urql client with persistedExchange to send hashes to the server. Requires @urql/exchange-persisted and uses the document hash from __meta__.

```ts
import { cacheExchange, createClient } from '@urql/core'
import { persistedExchange } from '@urql/exchange-persisted'

const client = new createClient({
  url: 'YOUR_GRAPHQL_ENDPOINT',
  exchanges: [
    cacheExchange,
    persistedExchange({
      enforcePersistedQueries: true,
      enableForMutation: true,
      generateHash: (_, document) => Promise.resolve(document['__meta__']['hash'])
    })
  ]
})
```

--------------------------------

### Apollo Server typed resolvers

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/graphql-server-apollo-yoga.mdx

Example of using generated Resolvers type with Apollo Server. Reads schema.graphql, defines typed resolvers, and starts the server.

```ts
import { readFileSync } from 'node:fs'
import { ApolloServer } from 'apollo-server'
import { Resolvers } from './resolvers-types'

const typeDefs = readFileSync('./schema.graphql', 'utf8')

const resolvers: Resolvers = {
  Query: {
    // typed resolvers
  }
}

const server = new ApolloServer({ typeDefs, resolvers })

// The `listen` method launches a web server
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`)
})
```

--------------------------------

### Build and test the project

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/custom-codegen/contributing.mdx

Run these commands from the root directory to build all common/core packages and run the test suite. This verifies your development environment is set up correctly.

```sh
pnpm build
pnpm test
```

--------------------------------

### GraphQL Yoga with typed resolvers

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/getting-started/index.mdx

Use the generated Resolvers type to type your resolvers object for GraphQL Yoga. The example creates a schema and a Yoga server, then starts an HTTP server on port 4000.

```ts
import { readFileSync } from 'node:fs'
import { createServer } from 'node:http'
import { createYoga, createSchema } from 'graphql-yoga'
import { Resolvers } from './resolvers-types'

const typeDefs = readFileSync('./schema.graphql', 'utf8')

const resolvers: Resolvers = {
  Query: {
    // typed resolvers!
  }
}

const schema = createSchema({ typeDefs, resolvers })
const yoga = createYoga({ schema })
const server = createServer(yoga)

server.listen(4000, () => {
  console.log('GraphQL Server is listening on http://localhost:4000/graphql');
})
```

--------------------------------

### Add a comment with the add plugin in codegen.ts

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/other/add.mdx

Configures the `add` plugin to prepend a comment (`/* eslint-disable */`) to the generated file. The plugin is placed in the `plugins` array for the target file. This example uses the default placement (start of file).

```typescript
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  // ...
  generates: {
    'path/to/file.ts': {
      plugins: [
        {
          add: {
            content: '/* eslint-disable */'
          }
        },
        'typescript'
      ]
    }
  }
}
export default config
```

--------------------------------

### Install @graphql-codegen/typescript-compatibility

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/migration/from-0-18.mdx

Install the typescript-compatibility plugin from NPM as a dev dependency.

```sh
npm i -D @graphql-codegen/typescript-compatibility
```

--------------------------------

### Initialize GraphQL Code Generator

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/README.md

Run the initialization command to set up GraphQL Code Generator. It will guide you through the process of setting up a schema, selecting plugins, and choosing a destination for the generated file.

```bash
pnpm graphql-codegen init
```

--------------------------------

### Apollo Server integration (src/server.ts)

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/graphql-server-apollo-yoga-with-server-preset.mdx

Use this snippet to set up an Apollo Server with the generated typeDefs and resolvers. The listen method launches a web server and logs the URL.

```ts
import { ApolloServer } from 'apollo-server'
import { resolvers } from './schema/resolvers.generated'
import { typeDefs } from './schema/typeDefs.generated'

const server = new ApolloServer({ typeDefs, resolvers })

// The `listen` method launches a web server
server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`)
})
```

--------------------------------

### Generate, build, and run commands

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/examples/typescript-esm/README.md

Commands to generate code with pnpm codegen, build with tsc, and run the output with pnpm start.

```bash
# generate code
pnpm codegen
# run tsc
pnpm build
# run the tsc output
pnpm start
```

--------------------------------

### Install latest versions of official plugins

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/migration/operations-and-client-preset-from-5-0.mdx

Install the latest versions of the official plugins using npm2yarn. This command updates @graphql-codegen/cli, @graphql-codegen/typescript-operations, and @graphql-codegen/client-preset to their latest versions.

```sh
npm i -D @graphql-codegen/cli@latest @graphql-codegen/typescript-operations@latest @graphql-codegen/client-preset@latest
```

--------------------------------

### GraphQL Yoga server (src/yoga.ts)

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/api-testing.mdx

Creates a GraphQL Yoga server with a Query type exposing 'hello' and a Mutation type exposing 'echo'.

```ts
import { createSchema, createYoga } from 'graphql-yoga'

const schema = createSchema({
  typeDefs: /* GraphQL */ `
    type Query {
      hello: String!
    }

    type Mutation {
      echo(message: String!): String!
    }
  `,
  resolvers: {
    Query: {
      hello: () => 'Hello world!'
    },
    Mutation: {
      echo: (_, args) => args.message
    }
  }
})

export const yoga = createYoga({
  schema
})
```

--------------------------------

### Install GraphQL Code Generator dependencies

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/README.md

Install the basic dependencies for GraphQL Code Generator using pnpm. This includes the graphql package and the @graphql-codegen/cli as a dev dependency.

```bash
pnpm add graphql
pnpm add -D @graphql-codegen/cli
```

--------------------------------

### GraphQL schema for Freezed plugin configuration

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/flutter-freezed.mdx

Example schema.graphql used to demonstrate plugin configuration. Defines enums, types, interfaces, and unions.

```graphql
enum Episode {
  NEWHOPE
  EMPIRE
  JEDI
}

type Actor {
  name: String!
  appearsIn: [Episode]!
}

type Starship {
  id: ID!
  name: String!
  length: Float
}

interface Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
}

type Human implements Character {
  id: ID!
  name: String!
  friends: [Actor]
  appearsIn: [Episode]!
  totalCredits: Int
}

type Droid implements Character {
  id: ID!
  name: String!
  friends: [Actor]
  appearsIn: [Episode]!
  primaryFunction: String
}

union SearchResult = Human | Droid | Starship
```

--------------------------------

### Generated TypedDocumentNode example

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/typescript/typed-document-node.mdx

Example output showing the generated TypedDocumentNode with built-in types. The plugin generates a pre-compiled DocumentNode and passes the result type and variables type as generics.

```ts
// Represents the variables type of the operation - generated by `typescript` + `typescript-operations` plugins
export type RatesQueryVariables = Exact<{
  currency: Scalars['String'];
}>;

// Represents the result type of the operation - generated by `typescript` + `typescript-operations` plugins
export type RatesQuery = (
  { __typename?: 'Query' }
  & {
  rates?: Maybe<Array<Maybe<(
    { __typename?: 'ExchangeRate' }
    & Pick<ExchangeRate, 'currency' | 'rate'>
    )>>>
}
  )

// Generated by this plugin - creates a pre-compiled `DocumentNode` and passes result type and variables type as generics
export const ratesQuery: TypedDocumentNode<RatesQuery, RatesQueryVariables> = {
  kind: 'Document',
  definitions: [
    {
      kind: 'OperationDefinition',
      operation: 'query',
      name: { ... }
    }
  ]
}
```

--------------------------------

### GraphQL schema for enum resolver example

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/plugins/flow/flow-resolvers.mdx

Schema used in the enum resolver usage example. Defines a Query with a favoriteColor field returning the Color enum, which has values RED and BLUE.

```graphql
type Query {
  favoriteColor: Color!
}

enum Color {
  RED
  BLUE
}
```

--------------------------------

### Colocated file structure example

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/advanced/generated-files-colocation.mdx

Shows the desired directory structure where generated files (posts.generated.tsx) sit next to the original GraphQL operation files (Posts.tsx).

```text
src/
  components/
    posts/
      posts.generated.tsx
      Posts.tsx
  # …
```

--------------------------------

### Install graphql-scalars with npm

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/graphql-server-apollo-yoga-with-server-preset.mdx

Install the graphql-scalars package, which provides an extensive list of custom scalars. The server preset automatically uses scalar implementations from this package when it finds a matching name.

```sh
npm i graphql-scalars
```

--------------------------------

### Run tests with pnpm test

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/custom-codegen/contributing.mdx

Command to run the test suite for the plugin. Execute this in the plugin directory to verify the plugin works as expected.

```sh
pnpm test
```

--------------------------------

### GraphQL Modules project structure

Source: https://github.com/dotansimha/graphql-code-generator/blob/master/website/content/docs/guides/graphql-modules.mdx

Shows the recommended directory layout for a GraphQL Modules API with separate modules for user and product, each containing resolvers and typedefs.

```text
- src/
  - modules/
    - user/
      - resolvers.ts
      - typedefs/
        - user.graphql
    - product/
      - resolvers.ts
      - typedefs/
        - product.graphql
```