Codegen
On this page

TypeScript GraphQL Files Modules

GraphQL Code Generator plugin for generating TypeScript types for GraphQL files. This plugin generates a single file per GraphQL file, and uses the `graphql-tag/loader` to load the GraphQL files.

Version
4.0.1
Weekly downloads
113k
License
MIT
Updated
Apr 19, 2026

Installation

          npm i -D @graphql-codegen/typescript-graphql-files-modules

Config API Reference

modulePathPrefix

type: string

Allows specifying a module definition path prefix to provide distinction between generated types. Default value: ""

relativeToCwd

type: boolean

By default, only the filename is being used to generate TS module declarations. Setting this to true will generate it with a full path based on the CWD. Default value: “false”

prefix

type: string

By default, a wildcard is being added as prefix, you can change that to a custom prefix Default value: ”*/“

type

type: string

By default, the named exports will have a type DocumentNode. Change this to “string” if you only use raw strings. Default value: “DocumentNode”

Pre-Requirements

To use this template, make sure you are using graphql-tag/loader with Webpack.

Example

Given that you have a query named MyQuery in my-query.graphql file, this template will generate the following code:

declare module '*/my-query.graphql' {
  import { DocumentNode } from 'graphql'
  const MyQuery: DocumentNode

  export { MyQuery }

  export default defaultDocument
}

Accordingly, you can import the generated types and use it in your code:

import myQuery from './my-query.graphql'

OR

import { myQuery } from './my-query.graphql'