如何将.gql文件中的GraphQL查询以字符串而非对象导入？

你遇到的这个问题很常见——这是因为你的构建工具（比如Webpack、Vite）大概率配置了graphql-tag或者类似的loader，它会自动把.gql/.graphql文件解析成GraphQL的DocumentNode对象（也就是你打印出来的那个对象），而不是返回原始的查询字符串。要拿到纯字符串，你可以根据自己的开发场景选下面几种方法：

1. 针对构建工具配置（推荐） #

如果你用Vite #

Vite原生支持通过?raw后缀导入纯文本文件，直接修改你的导入语句就行：

// CommonJS方式
const query = require("@/hello.gql?raw");
// ES模块方式
import query from "@/hello.gql?raw";

这样导入的query就是纯字符串了，不需要额外安装依赖。

如果你用Webpack #

需要借助raw-loader来处理特定的.gql文件，步骤如下：

• 首先安装依赖：

  npm install raw-loader --save-dev
  

• 然后在webpack.config.js里添加规则，区分普通.gql文件和你要纯字符串导入的文件：

  module.exports = {
    module: {
      rules: [
        // 让其他.gql文件继续用graphql-tag解析成DocumentNode
        {
          test: /\.gql$/,
          exclude: /hello.gql/, // 排除你要纯字符串导入的文件
          use: 'graphql-tag/loader',
        },
        // 对hello.gql用raw-loader导入纯文本
        {
          test: /hello.gql/,
          use: 'raw-loader',
        },
      ],
    },
  };
  

之后再用require("@/hello.gql")导入，得到的就是纯字符串了。

2. Node.js环境下手动读取文件 #

如果你的代码是在Node.js环境直接运行（不经过构建工具），可以直接用Node的fs模块读取文件内容：

const fs = require('fs');
const path = require('path');

// 拼接文件路径，根据你的项目结构调整
const queryFilePath = path.resolve(__dirname, './hello.gql');
// 读取文件为UTF-8格式的字符串
const query = fs.readFileSync(queryFilePath, 'utf8');

3. 调整.gql文件的写法 #

你也可以直接在.gql文件里把查询内容包裹成字符串导出，这样导入后直接拿到字符串，需要时再手动解析成DocumentNode：
比如在hello.gql里：

export default `
  query HelloQuery {
    # 这里是你的查询内容
    hello {
      id
      content
    }
  }
`;

然后在代码里：

// 直接拿到纯字符串
import queryString from '@/hello.gql';
// 如果需要解析成DocumentNode，再用graphql-tag处理
import gql from 'graphql-tag';
const queryDocument = gql(queryString);

内容的提问来源于stack exchange，提问作者Lévi Simeon