随着前端技术的不断发展，前端也开始越来越依赖后端的能力，如 GraphQL 这种前端与后端协同的技术已经成为趋势。而 webpack-graphql-server 就是一款让我们可以更加方便的在前端使用 GraphQL 的工具。本文就来详细介绍一下该 npm 包的使用方法。
什么是 webpack-graphql-server？
webpack-graphql-server 是基于 webpack 构建的一个 GraphQL server，该服务可以让前端在项目中使用 GraphQL，并更好的与后端配合进行开发。使用 webpack-graphql-server，我们可以通过一个简单的命令行操作将我们的 GraphQL 服务启动起来，并在项目当中使用 @graphql-tools 等工具集，从而更好的进行测试和开发。
使用方法
安装
使用 npm 进行安装：
npm install webpack-graphql-server --save-dev
配置
在项目的配置文件中进行如下配置，以便于 webpack-graphql-server 可以正常工作：
-- -------------------- ---- -------
-- -----------------
----- -------------------- - ----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
--------- -----------
-- -- ------- --- --
----------- -------------------------------
---
-
--其中，endpoint 为我们在前端进行 Graphql 查询的路径，你可以自定义设置，graphqlUrl 则是我们对应的后端 GraphQL API 的地址。
启动
完成配置之后，在控制台输入命令 webpack-graphql-server 即可启动我们的 GraphQL 服务：
webpack-graphql-server
启动之后，你可以在浏览器中访问你的 GraphQL 服务，通过查询语句获取到需要的数据。
在项目中使用
我们可以使用 @graphql-tools 这款 GraphQL 工具集将我们的 GraphQL 服务集成到项目中，下面是一个例子：
-- -------------------- ---- -------
------ - -------- - ---- -------------------
------ - ---------- - ---- ----------------------
------ - ------------ - ---- ----------------
------ - ------------- - ---- ------------------------
------ - ----------------- -------------------------- - ---- ----------------
-- ---- -------------- ------- ----
----- -------- - --- ---------- ---- ------------------------------- ---
-- ---- --------------- ------- -------
----- ----------- - -------------- - ------- -- -- -
------ -
-------- -
-----------
-------------- ------- ----------------------------------
-
-
---
-- ---- ------------
----- ------------ - --- --------------
------ --- ----------------
----- -----------------------------
---
-- -- ------
----- --------- - ----- -------------- -- -
----- - ---- - - ----- -------------------- ------ ------------------ ---
------ ---------------------------- ------- ------------------------ ----- -------- ---
--
-- -- ------
----- ---- - ----- -- -- -
----- ------ - ----- ------------------------
----- ------ - ----- --------------- -- ----- ----
-------------------------
-
-------在上面的例子当中，我们使用了 introspectSchema 和 makeRemoteExecutableSchema 这两个函数，通过从远程地址获取 Schema 进行操作。
小结
本文介绍了 webpack-graphql-server 这款 npm 包的使用方法，它可以让我们更加便捷的在前端使用 GraphQL 技术，配合 @graphql-tools 等工具集完成前后端协同的开发和测试。如果你正在开发一个需要使用 GraphQL 的项目，不妨试试这款工具，它会为你的开发带来更加便捷的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f281e8991b448d50a4