GraphQL 是一种用于 API 的查询语言，同时也是一个满足你数据查询的运行时。GraphQL 对你的 API 中所提供的数据设定了一套统一的、易用的、强大的、可操作的 API，同时对你的应用程序所面临的查询，变更，和订阅等方面也同样具备相关能力。
GraphQL 可以看作一个是 API 的中间层，协调服务端和客户端间的数据交互。在 Node.js 中使用 GraphQL 提供的工具可以大大方便我们的开发。
graphql-file-loader 是一个使得我们可以在 .js 或 .ts 文件中书写 GraphQL Schema 或者模拟客户端请求的工具，可以帮助我们在开发中更加快速的进行 schema 的开发。
安装
--- ------- ---------- ------------------------------------
使用
在 .js 或者 .ts 等文件中使用 graphql-file-loader
通过 import 或者 require 引入的 GraphQL 模块，我们可以把 .graphql 文件中的语句传递给 graphql-parse，就可以对其中的 GraphQL 语句进行编译和操控。在加载模块时，webpack 会查找 .graphql 文件，自动调用该 loader 并把它当成一个模块调入。
在 webpack.config.js 中加入规则
-------------- - -
------- -
------ -
-
----- -------------------
-------- ---------------
------- ---------------------------------------
-
-
-
-在代码中引用 .graphql
------ -------- ---- ---------------------------
或者，使用 require：
----- -------- - ------------------------------------
我们也可以在代码中继续使用 gql 解析出来的字符串：
------ - --- - ---- -----------------------
----- -------- - ----
----- --------- -
---
-
-将 .graphql 文件编译为 .js
可以先编写好 GraphQL Schema 语句并保存在 .graphql 文件中，然后利用 graphql-file-loader 对其进行编译并生成一个 js 文件，最后再将生成的 js 文件作为一个普通 js 文件进行引用，就可以直接使用其中的 schema 语句。
举个例子，在新建一个 helloworld.graphql 文件，然后进行以下定义：
---- ----- - ------ ------- -
GraphQL 视极简代码规范为生死攸关，尤其在建立定义好的 Schema 命名时，使用数据源名称作为前缀命名。
若命名为 Hello World，则会出现正则等相关复杂操作时的无法预知错误。
接着，我们在 package.json 中新建以下内容：
---------- - ------------------ -------- -------- --------------- ---------------- ----- ------------------- ---- ----- ---------- -------- -
并在项目根目录下写入 codegen.yml 的配置文件，如下：
---------- ----
------- ------------------
---------- -------------------------
-----------
--------
------------------ -----------------
------------
------- --------------
----------
------------------------------------
--------
- ----------
- ---------------------
- -----------------------webpack.config.js 指定 loader：
------ -
-
----- -------------------
-------- ---------------
---- --------------------------------------
-
-我们可以直接使用 import 命令或通过 require 的方法，将编译后的文件作为模块导入：
------ -------- ---- --------------------
或者：
----- -------- - -------------------------------------
使用演示
示例代码如下（假设在文件路径 src/graphql/schema.graphql 文件中有以下 Schema 定义）：
---- ----- - ------ ------- -------- ----- ---- - ---- ---- - --- --- ----- ------- ------ ------- ------- -------- -
创建resolvers.js文件：
----- -------- - -
------ -
-
--- ----
----- ---------
------ ---------------------
------- ----
--
-
--- ----
----- --------
------ --------------------
------- -----
-
-
--
----- --------- - -
------ -
------ -- -- ------- ----------
----- -------- ----- -- -
--------------------
------ ------------------------ -- ------- --- ---------
-
-
--
------ ------- ----------创建 index.js 文件：
------ - -------------------- - ---- ----------------
------ -------- ---- -------------------
------ --------- ---- --------------
----- ------ - ----------------------
---------
----------
--
----- ----- - -
-
-------- ---- -
----
-----
------
-
-
--
--------------- -------------------- -- -
--------------------
--
-------------- -- -
-------------------
---在项目根目录下执行：
---- --------
便可以看到控制台输出以下信息：
- ----- - ----- - ----- -------- ------ -------------------- ------- ----- - - -
至此，通过 webpack 和 graphql-file-loader 工具，我们可以很方便地对 GraphQL Schema 语句进行管理，并且可以在代码中引用已经对 GraphQL Schema 语句进行了编译的文件，而不用担心 GraphQL Schema 语句过于庞大导致代码难以维护的问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaeb7b5cbfe1ea0610ebe