在前端工程化的领域中，GraphQL 成为了一种流行的数据交换语言，尤其是在前端与后端交互中。本文将详细说明 GraphQL 的概念和实现方法，并介绍如何使用 GraphQL 来构建一个应用程序。
什么是 GraphQL？
GraphQL 是一种开放源代码的数据查询和操作语言，由 Facebook 发布，旨在替代 RESTful API。它通过一个类型系统来描述数据的结构，以及如何操作这些数据。这个类型系统是使用标记语言编写的，被称为 Schema（模式）。
GraphQL 结构包括类型定义、字段、参数等，这些概念都存在于 Schema 中，Schema 负责管理 GraphQL 应用程序的所有数据，包括查询和变更。
GraphQL 应用的搭建
Node.js是开发GraphQL应用程序所需的最常用资源。在本文中，我们将介绍如何使用Node.js快速搭建一个基本的GraphQL应用程序。现在让我们一步一步地创建和配置GraphQL应用程序。
准备工作
首先，我们需要 Node.js 和 npm 命令行工具，这里不再赘述。其次，我们需要安装 Express 和 graphql 这两个库：
npm install express graphql --save
创建 Express 应用程序
接下来，我们需要创建一个 Express 应用程序。在项目根目录下创建 index.js 文件，并添加以下代码：
-- -------------------- ---- -------
----- ------- - ------------------
----- - ----------- - - --------------------------
----- --- - ---------
--------
-----------
-------------
------- -- ------ --
---------- -- -----
--------- ---- -- -- --------
--
-
----------------
-------------------- - ------- --- ------ -- ------------------------以上代码将创建一个 Express 应用程序，并将 GraphQL 配置添加到 /graphql 端点。
Schema 配置
我们需要创建一个 GraphQL Schema 来管理所有的数据和操作，这里先定义一个简单的 Schema，它包含一个 “Hello World” 的查询：
-- -------------------- ---- -------
----- - ------------------ -------------- ------------- - - ------------------
----- --------- - --- -------------------
----- --------
------- -
-------- - ----- ------------- -
-
--
----- --------- - --- -------------------
----- ------------
------- -
------ -
----- ----------
----- -
----- - ----- ------------- -
--
-------- ------ -- -
------ - -------- ------- ----------- -- ---------- -
-
-
-
--
----- ------ - --- --------------- ------ --------- --在上面的代码中，我们定义了一个类型名为 hello，包含字段 message，并将其添加到了 rootQuery 查询。
根节点配置
上述代码中 resolve 函数所在的对象即是 GraphQL 的“根节点”（Root Type）。它是从 Schema 中查找部分目标的入口点。
在根节点中，我们将 hello 给出的参数和返回值映射到在 Schema 中定义的查询和类型。
开启 GraphiQL
最后，我们需要开启一个 GraphiQL UI，让用户可以提交查询操作并得到响应。可以通过设置 graphiql 属性为 true 来启用 GraphiQL UI。现在你可以浏览器访问 localhost:4000/graphql 端点，会看到一个交互式 UI 界面，可以在其中运行查询。
{
hello(name: "GraphQL")
}输出：
{
"data": {
"hello": {
"message": "Hello, GraphQL!"
}
}
}GraphQL 应用的应用
我们已经创建了一个基本的 GraphQL 应用程序，现在我们可以将其与现有的应用程序集成，并使用 GraphQL 作为前端数据交换的方式。
以 Vue.js 为例，我们可以使用 Vue-Apollo 包，它提供了与 Apollo 客户端集成的标准组件。
客户端配置
首先，我们需要使用以下命令安装 Vue-Apollo：
npm install vue-apollo --save
然后，在项目的 main.js 文件中，我们添加以下代码：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------ ------ ------------ ---- -------------- ------------------ ----- ------------ - --- -------------- ---- ------------------------------- -- ----- -------------- - --- ----------- -------------- ------------ -- --- ----- --------------- ------- - -- ------- -----------------
在这里，我们先创建了一个 ApolloClient，它连接到我们已经在上述 Node.js 示例中创建的 GraphQL 服务器。我们使用 uri 属性来指定 GraphQL 端点的位置。ApolloClient 会发送 HTTP POST 请求到指定的服务器端口，GraphQL 服务器将解析请求，处理查询，并返回相应的 JSON 数据。
步骤二是在 Vue.js 的应用程序中使用 Apollo 提供的两个核心组件：Query 和 Mutation。
Query 和 Mutation 组件
Query 和 Mutation 是两个 Vue 高阶组件，它们继承 Apollo 提供的 Query 和 Mutation 组件，并允许我们以更简洁的方式构建数据查询和变更。
-- -------------------- ---- -------
----------
-----
------ ------------ - ----------- ---------- ---
--------- --------- ------- - ----- -------- ----- - ---
---- -------------------------------
---- ------------------------ -- ------------- --------
---- --------- ---------- --------
-----------
--------
------
-----------
--------
------ --- ---- -------------
------ - ----- - ---- ------------
------ ------- -
----- -------------
----------- -
-----
--
------- -
------ ----
----- -
----------- ----------
-
-
-
-
---------在此示例中，我们定义了一个简单的 HelloWorld 组件，其中使用了两个 Vue-Apollo 组件。
首先，我们使用 <query> 组件来获取服务器上的 hello 查询。我们指定查询字符串为 "query { hello(name: 'GraphQL') }"，然后利用 <template> 中的插槽来渲染返回的数据。
接下来，我们使用 apollo 选项来定义与服务器的通信。在这里，我们使用了名为 hello 的别名，以查询指定 hello(name: 'GraphQL')。这可以让我们在 HelloWorld.vue 模板中直接使用 this.hello。
Mutation
-- -------------------- ---- -------
----------
------
------ ----------- -------------- --
------- ------------- -------------------------- -------------
-------
-----------
--------
------ --- ---- -------------
------ - -------- - ---- ------------
------ ------- -
----- ------------------
----------- -
--------
--
------ -
------ -
----- --
-
--
-------- -
------------ -
------------
---------
--------- ----
--------------- -------- -
---------------- ------ -
--
----
-
-
--
---------- -
----- ---------
-
--
-------- -- -
----------- ------------ ----------
--
-
-
-
---------以上是一个简单的 Mutation 组件。Mutation 组件的用法类似于 Query 组件。我们从 Apollo 客户端导入 "Mutation" 组件，并使用 updateName 方法发送一个 GraphQl Mutation 请求。为了使用 updateName 中的 $apollo 方法，我们需要在组件内部使用 this.$apollo 访问其。
总结
本文简要介绍了 GraphQL 的概念、组件和用法，并提供了一些示例代码，以帮助读者快速掌握 GraphQL 的使用。GraphQL 在前端开发中越来越受欢迎，是一个旨在解决现有架构限制的新兴技术。它允许开发人员实现更细粒度的数据交换，并提供了强大的工具，如 GraphiQL 界面和 Vue-Apollo 组件，以帮助开发人员轻松地使用 GraphQL 为前端应用程序发送查询和变更请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491181848841e9894f1d473