TypeScript GraphQL Files Modules

Package name	Weekly Downloads	Version	License	Updated
@graphql-codegen/typescript-graphql-files-modules				Mar 8th, 2026

Installation

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

pnpm add -D @graphql-codegen/typescript-graphql-files-modules

yarn add --dev @graphql-codegen/typescript-graphql-files-modules

bun add --dev @graphql-codegen/typescript-graphql-files-modules

This plugin generates TypeScript typings for .graphql files containing GraphQL documents, which later on can be consumed using graphql-tag/loader or use string types if you will use the operations as raw strings, and get type-check and type-safety for your imports. This means that any time you import objects from .graphql files, your IDE will provide auto-complete.

This plugin also handles .graphql files containing multiple GraphQL documents, and name the imports according to the operation name.

⚠ Fragments are not generated with named imports, only as default imports, due to graphql-tag/loader behavior.

Config API Reference

modulePathPrefix

type: string default: (empty)

Allows specifying a module definition path prefix to provide distinction between generated types.

Usage Examples

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'src/api/user-service/queries.d.ts': {
       documents: 'src/api/user-service/queries.graphql',
       plugins: ['typescript-graphql-files-modules'],
       config: {
         // resulting module definition path glob: "*\/api/user-service/queries.graphql"
         modulePathPrefix: "/api/user-service/",
       },
     },
   },
 };
 export default config;

relativeToCwd

type: boolean default: false

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.

prefix

type: string default: *\/

By default, a wildcard is being added as prefix, you can change that to a custom prefix

type

type: string (values: DocumentNode, string) default: DocumentNode

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

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";