JavaScript：gq-loader（客户端）

简介

gq-loader 是一个简单的 JavaScript GraphQL 客户端，通过 webpack loader 机制，让 *.gql 文件可以作为模块直接在 JavaScript 中导入和使用。它旨在简化 GraphQL 查询在项目中的组织方式，开发者可以将查询语句写入独立文件，以模块化的方式管理和复用。

功能特性

• 将 .gql 文件作为 ES Module 导入，配合 webpack 实现按需加载
• 轻量级设计，核心逻辑简洁，无额外运行依赖
• 支持 GraphQL 查询、变更等操作文本的模块化组织
• 与现有 webpack 构建链路无缝集成

安装

npm install gq-loader --save-dev

配置

在 webpack.config.js 中添加 loader 规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.gql$/,
        use: "gq-loader",
      },
    ],
  },
};

基本用法

1. 创建 .gql 文件

# query.gql
query UserInfo($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

2. 在 JavaScript 中导入并使用

import UserInfo from "./query.gql";

// UserInfo 为解析后的 GraphQL 查询字符串
fetch("/graphql", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    query: UserInfo,
    variables: { id: "123" },
  }),
})
  .then((res) => res.json())
  .then((data) => console.log(data));

API

gq-loader 本身不暴露复杂的运行时 API，它作为 webpack loader，仅负责将 .gql 文件内容转换为可供 JavaScript 使用的字符串模块。转换后的模块默认导出为查询字符串。

原理说明

gq-loader 将 .gql 文件的文本内容作为默认导出字符串封装在 CommonJS 模块中，webpack 打包时再将其转换为浏览器可识别的模块代码，从而在不引入额外依赖的情况下实现 GraphQL 脚本的模块化加载。

许可证

该项目采用 MIT 许可证，可自由使用和修改。