Codegen
PluginsTypeScriptgraphql-request

TypeScript GraphQL-Request

Package nameWeekly DownloadsVersionLicenseUpdated
@graphql-codegen/typescript-graphql-requestDownloadsVersionLicenseApr 19th, 2026

Installation

npm i -D @graphql-codegen/typescript-graphql-request
⚠️

Usage Requirements In order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (query / mutation / subscription and fragment) set as documents: … in your codegen.yml.

Without loading your GraphQL operations (query, mutation, subscription and fragment), you won’t see any change in the generated output.

This plugin generates graphql-request ready-to-use SDK, which is fully-typed.

Config API Reference

rawRequest

type: boolean default: false

By default, the request method return the data or errors key from the response. If you need to access the extensions key you can use the rawRequest method.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-graphql-request'],
       config: {
         rawRequest: true
       },
     },
   },
 };
 export default config;

extensionsType

type: string default: any

Allows you to override the type for extensions when rawRequest is enabled.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-graphql-request'],
       config: {
         rawRequest: true,
         extensionsType: 'unknown'
       },
     },
   },
 };
 export default config;
💡

Make sure you have typescript plugin and typescript-operations as well in your configuration:

Usage Example

For the given input:

query continents {
  continents {
    name
    countries {
      ...CountryFields
    }
  }
}
 
fragment CountryFields on Country {
  name
  currency
}

It generates SDK you can import and wrap your GraphQLClient instance, and get fully-typed SDK based on your operations:

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)
}

Simple Request Middleware

The generated sdk accepts an optional middleware function to wrap the requests the client makes.

This can enable scenarios like request failure retries and logging at the sdk level.

To use middleware, just pass an SdkFunctionWrapper as the second argument to getSdk.

// `SdkFunctionWrapper` is a type we provide. `action` is the `client` request execution generated by this template. The wrapper MUST invoke `action()` and should return the promise returned by `action`, or its resolution.
 
type SdkFunctionWrapper = <T>(action: () => Promise<T>) => Promise<T>

Examples of Middleware

  • This example shows a naive request timing logger.
const client = new GraphQLClient('')
const clientTimingWrapper: SdkFunctionWrapper = async <T>(action: () => Promise<T>): Promise<T> => {
  const startTime = new Date()
  const result = await action()
  console.log('request duration (ms)', new Date() - startTime)
  return result
}
 
const sdk = getSdk(client, clientTimingWrapper)
  • This example uses polly-js to define a failure retry wrapper. (this is the use case for which I originally intended to add this capability)
const withRetries: RetryWrapper = <T>(action: () => Promise<T>) =>
  polly()
    .handle((err: Error) => {
      warn('GraphqlClient:NetworkError', err)
      return err.message.includes('connect ETIMEDOUT')
    })
    .waitAndRetry(3)
    .executeForPromise(info => {
      if (info.count === 3) {
        error('GraphqlClient:MaxRetries', null, {
          ...info,
          action: action.toString()
        })
      } else if (info.count > 0) {
        warn('GraphqlClient:RetryingCall', null, {
          ...info,
          action: action.toString()
        })
      }
 
      return action()
    })
 
const sdk = getSdk(client, withRetries)
graphql-files-modulesmongodb