Codegen
On this page

TypeScript RTK-Query

RTK Query codegen plugin for GraphQL. Generates React Hooks for GraphQL queries and mutations. Works with any GraphQL client.

Version
4.0.4
Weekly downloads
21k
License
MIT
Updated
Jun 23, 2026

Installation

          npm i -D @graphql-codegen/typescript-rtk-query

Config API Reference

importBaseApiFrom

type: string

Define where to import the base api to inject endpoints into

importBaseApiAlternateName

type: string

Change the import name of the baseApi from default ‘api’ Default value: “‘api’”

exportHooks

type: boolean

Whether to export React Hooks from the generated api. Enable only when using the "@reduxjs/toolkit/query/react" import of createApi Default value: “false”

overrideExisting

type: string

Sets the overrideExisting option, for example to allow for hot module reloading when running graphql-codegen in watch mode. Will directly be injected as code. Default value: “undefined”

addTransformResponse

type: boolean

Sets the addTransformResponse option, which will automatically add a types transformResponse for query Default value: “false”

Usage Examples

Using graphql-request

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

const config: CodegenConfig = {
  schema: 'MY_SCHEMA_PATH',
  documents: './src/**/*.graphql',
  generates: {
    './src/app/api/generated.ts': {
      plugins: [
        'typescript',
        'typescript-operations',
        {
          'typescript-rtk-query': {
            importBaseApiFrom: 'src/app/api/baseApi',
            exportHooks: true
          }
        }
      ]
    }
  }
}
export default config

The generated src/app/api/generated.ts would try to import { api } from 'src/app/api/baseApi'{:ts}, so you have to create that file:

src/app/api/baseApi.ts
import { GraphQLClient } from 'graphql-request'
import { createApi } from '@reduxjs/toolkit/query/react'
import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query'

export const client = new GraphQLClient('/graphql')

export const api = createApi({
  baseQuery: graphqlRequestBaseQuery({ client }),
  endpoints: () => ({})
})

From that point on, you can import the generated hooks from src/app/api/generated.ts:

src/components/MyComponent.ts
import { useMyQuery } from 'src/app/api/generated'

export const MyComponent = () => {
  const { data, isLoading } = useMyQuery({ page: 5 })
}

Extending generated code

You can import the generated code into a new file and use api.enhanceEndpoints{:ts} to add lifecycle hooks or providesTags/invalidatedTags information to your api:

src/аpp/api/enhanced.ts
import { api as generatedApi } from 'src/app/api/generated'

export const api = generatedApi.enhanceEndpoints({
  addTagTypes: ['User'],
  endpoints: {
    GetUserById: {
      providesTags: (result, error, arg) => [{ type: 'User', id: arg.userId }]
    }
  }
})

export const { useGetUserByIdQuery } = api

Make sure that this file is referenced from your code so that the enhanced endpoints are usable. The easiest way to do this is to re-export the hooks in this file and import them exclusively from it.

Setting an authentication header after a Mutation

You can also use this to set an “authentication” header after a login mutation:

import { client } from 'src/app/api/baseApi'
import { api as generatedApi } from 'src/app/api/generated'

export const api = generatedApi.enhanceEndpoints({
  endpoints: {
    Login: {
      async onQueryStarted(arg, { queryFulfilled }) {
        const { data } = await queryFulfilled
        client.setHeader('authentication', `Bearer ${data.token}`)
      }
    }
  }
})

export const { useLoginMutation } = api