如何在TypeScript项目中正确导入.graphql格式文件

报错原因 #

TypeScript 默认无法识别 .graphql 后缀的模块，既缺少对应文件类型的声明，你当前使用的 ts-node 运行环境也没有适配 .graphql 文件的解析加载逻辑，因此触发导入错误。

操作步骤 #

1. 安装依赖 #

针对 ts-node 运行的 Node.js 项目，先安装 graphql 文件导入工具：

npm install graphql-import-node

如果是 webpack 打包的项目，安装对应 loader：

npm install @graphql-tools/webpack-loader --save-dev

2. 添加类型声明 #

在项目根目录新建 graphql.d.ts 类型声明文件，写入以下内容，让 TypeScript 识别 .graphql 文件的导出类型：

declare module '*.graphql' {
  import { DocumentNode } from 'graphql'
  const content: DocumentNode
  export default content
}

修改 tsconfig.json 的 include 配置，确保声明文件被 TypeScript 加载：

{
  "compilerOptions": {
    // 保留原有配置不变
  },
  "include": ["src/**/*", "graphql.d.ts"]
}

3. 配置运行/打包规则 #

• 针对 ts-node 运行的项目：在项目入口文件的最顶部引入加载工具

  import 'graphql-import-node'
  

• 针对 webpack 打包的项目：在 webpack 配置中新增 loader 规则

  module.exports = {
    // 保留原有配置不变
    module: {
      rules: [
        {
          test: /\.graphql$/,
          exclude: /node_modules/,
          loader: '@graphql-tools/webpack-loader'
        }
      ]
    }
  }
  

配置完成后重启服务，原有导入语句 import typeDefs from "./schema/schema.graphql"; 即可正常使用，导入的 typeDefs 为解析完成的 GraphQL 文档对象，可直接传入 GraphQL 服务实例使用。

内容的提问来源于stack exchange，提问作者Edgar