GraphQL 是一种用于 API 的查询语言，同时也是一个满足你数据查询的运行时。GraphQL 对你的 API 中所提供的数据设定了一套统一的、易用的、强大的、可操作的 API，同时对你的应用程序所面临的查询，变更，和订阅等方面也同样具备相关能力。
GraphQL 可以看作一个是 API 的中间层，协调服务端和客户端间的数据交互。在 Node.js 中使用 GraphQL 提供的工具可以大大方便我们的开发。
graphql-file-loader 是一个使得我们可以在 .js 或 .ts 文件中书写 GraphQL Schema 或者模拟客户端请求的工具，可以帮助我们在开发中更加快速的进行 schema 的开发。
安装
npm install --save-dev @graphql-toolkit/graphql-file-loader
使用
在 .js 或者 .ts 等文件中使用 graphql-file-loader
通过 import 或者 require 引入的 GraphQL 模块，我们可以把 .graphql 文件中的语句传递给 graphql-parse，就可以对其中的 GraphQL 语句进行编译和操控。在加载模块时，webpack 会查找 .graphql 文件，自动调用该 loader 并把它当成一个模块调入。
在 webpack.config.js 中加入规则
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -------------------
-------- ---------------
------- ---------------------------------------
-
-
-
-在代码中引用 .graphql
import typeDefs from './path/to/schema.graphql';
或者，使用 require：
const typeDefs = require('./path/to/schema.graphql');我们也可以在代码中继续使用 gql 解析出来的字符串：
import { gql } from 'apollo-server-express'
const fooQuery = gql`
query yourQuery {
...
}
`将 .graphql 文件编译为 .js
可以先编写好 GraphQL Schema 语句并保存在 .graphql 文件中，然后利用 graphql-file-loader 对其进行编译并生成一个 js 文件，最后再将生成的 js 文件作为一个普通 js 文件进行引用，就可以直接使用其中的 schema 语句。
举个例子，在新建一个 helloworld.graphql 文件，然后进行以下定义：
type Query {
hello: String!
}GraphQL 视极简代码规范为生死攸关，尤其在建立定义好的 Schema 命名时，使用数据源名称作为前缀命名。
若命名为 Hello World，则会出现正则等相关复杂操作时的无法预知错误。
接着，我们在 package.json 中新建以下内容：
"scripts": {
"compile:graphql": "gql-gen --config ./codegen.yml",
"clean:graphql": "find ./file.graphql.d.ts -not -name index.d.ts -delete"
}并在项目根目录下写入 codegen.yml 的配置文件，如下：
-- -------------------- ---- -------
---------- ----
------- ------------------
---------- -------------------------
-----------
--------
------------------ -----------------
------------
------- --------------
----------
------------------------------------
--------
- ----------
- ---------------------
- -----------------------webpack.config.js 指定 loader：
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
use: ['@graphql-tools/graphql-file-loader']
}
]我们可以直接使用 import 命令或通过 require 的方法，将编译后的文件作为模块导入：
import typeDefs from './file.graphql.ts';
或者：
const typeDefs = require('./file.graphql.ts').default;使用演示
示例代码如下（假设在文件路径 src/graphql/schema.graphql 文件中有以下 Schema 定义）：
-- -------------------- ---- ------- ---- ----- - ------ ------- -------- ----- ---- - ---- ---- - --- --- ----- ------- ------ ------- ------- -------- -
创建resolvers.js文件：
-- -------------------- ---- -------
----- -------- - -
------ -
-
--- ----
----- ---------
------ ---------------------
------- ----
--
-
--- ----
----- --------
------ --------------------
------- -----
-
-
--
----- --------- - -
------ -
------ -- -- ------- ----------
----- -------- ----- -- -
--------------------
------ ------------------------ -- ------- --- ---------
-
-
--
------ ------- ----------创建 index.js 文件：
-- -------------------- ---- -------
------ - -------------------- - ---- ----------------
------ -------- ---- -------------------
------ --------- ---- --------------
----- ------ - ----------------------
---------
----------
--
----- ----- - -
-
-------- ---- -
----
-----
------
-
-
--
--------------- -------------------- -- -
--------------------
--
-------------- -- -
-------------------
---在项目根目录下执行：
node index.js
便可以看到控制台输出以下信息：
{ data: { user: { name: 'Sammy', email: 'sammy@example.com', status: false } } }至此，通过 webpack 和 graphql-file-loader 工具，我们可以很方便地对 GraphQL Schema 语句进行管理，并且可以在代码中引用已经对 GraphQL Schema 语句进行了编译的文件，而不用担心 GraphQL Schema 语句过于庞大导致代码难以维护的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaeb7b5cbfe1ea0610ebe