如何在Next.js 15中用Turbopack解析.graphql文件？

你遇到的问题确实是因为Turbopack目前对Webpack风格的第三方loader支持不完善，graphql-tag/loader这类Webpack loader无法直接通过Turbopack的规则配置生效。以下是几个可行的解决思路：

方法一：字符串导入+手动解析（快速临时方案） #

把.graphql文件当作纯文本导入，再用graphql-tag手动转换为DocumentNode：

1. 修改next.config.ts，配置Turbopack用raw-loader处理.graphql文件：

   import type { NextConfig } from 'next';
   
   const nextConfig: NextConfig = {
     experimental: {
       turbo: {
         rules: {
           '*.graphql': {
             loader: 'raw-loader',
             as: '*.txt',
           },
         },
         resolveExtensions: ['.graphql', '.gql', '.js', '.jsx', '.ts', '.tsx'],
       },
     },
   };
   
   export default nextConfig;
   

2. 安装raw-loader依赖：

   npm install raw-loader --save-dev
   

3. 在代码中导入并手动转换：

   import { gql } from 'graphql-tag'; // 或@apollo/client
   import queryContent from '@/graphql/queries/getSomeData.graphql';
   
   const QUERY = gql(queryContent);
   

方法二：预生成GraphQL文档（推荐长期方案） #

用GraphQL Code Generator把.graphql文件预转为TS/JS模块，完全避开loader依赖：

1. 安装代码生成工具依赖：

   npm install @graphql-codegen/cli @graphql-codegen/client-preset --save-dev
   

2. 创建codegen.ts配置文件：

   import type { CodegenConfig } from '@graphql-codegen/cli';
   
   const config: CodegenConfig = {
     schema: 'https://your-graphql-api-endpoint.com/graphql', // 本地schema路径或API地址
     documents: './src/graphql/**/*.graphql', // 匹配所有.graphql文件
     generates: {
       './src/graphql/generated/': {
         preset: 'client',
         plugins: [],
       },
     },
   };
   
   export default config;
   

3. 在package.json添加脚本：

   {
     "scripts": {
       "codegen": "graphql-codegen --watch"
     }
   }
   

4. 运行脚本生成文件，之后直接导入生成的查询：

   import { GetSomeDataDocument } from '@/graphql/generated/graphql';
   // GetSomeDataDocument已直接是解析好的DocumentNode，可直接用于Apollo等客户端
   

方法三：临时回退到Webpack #

如果必须保留原有的loader使用方式，可以暂时放弃Turbopack，用Webpack启动开发服务：

next dev

等Turbopack完善第三方loader支持后再切换回来。

额外注意点 #

• Turbopack的resolveExtensions仅控制文件扩展名的自动补全，不负责文件内容的解析，必须配合对应的规则处理才能识别非默认文件类型。
• 目前Turbopack的规则系统更偏向原生支持的模块类型，对Webpack loader的兼容仍在迭代中，官方后续会逐步完善相关能力。

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