GraphQL 是一种用于 API 的查询语言。它提供了一种更高效、强大和灵活的方式来获取和提交数据。而 Apollo 是一个用于构建 GraphQL 客户端的框架，它提供了一套完整的工具链，让开发者可以轻松地在前端使用 GraphQL。
在本文中，我们将学习如何在 Vue.js 应用中使用 GraphQL 和 Apollo。我们将介绍如何设置和配置 Apollo 客户端，如何在组件中进行查询，并展示如何处理返回的数据。
安装和配置 Apollo 客户端
首先，我们需要安装所需的依赖。我们将使用 vue-apollo 和 apollo-boost，它们可以通过 npm 或 yarn 进行安装。
npm install vue-apollo apollo-boost
或
yarn add vue-apollo apollo-boost
接下来，我们需要在 Vue.js 应用的入口文件中，设置和配置 Apollo 客户端。在这个例子中，我们将使用 apollo-boost，它提供了一个简单的方法来创建 Apollo 客户端。
-- -------------------- ---- ------- ------ --- ---- ------ ------ --------- ---- ------------- ------ ------------ ---- --------------- ----- ------------ - --- -------------- ---- -------------------------------- --- ------------------- ----- -------------- - --- ----------- -------------- ------------- --- --- ----- --------------- -- --- ------------------
在上面的例子中，我们创建了一个 ApolloClient，并将它传递给 VueApollo 的构造函数，创建了一个 apolloProvider，用于在整个应用中提供 Apollo 客户端的功能。
我们还需要在 vue-apollo 中设置一个中间件，来为每个请求添加一个 Authorization 头，用于进行身份验证，这样服务器才能验证我们的请求。在这个例子中，我们使用 localStorage 存储了一个 token 来进行身份验证。
-- -------------------- ---- -------
----- -------------- - --- ---------------------- -------- -- -
-- -- ------------ --- ----- ------
----- ----- - ------------------------------
----------------------
-------- -
-------------- ----- - ------- --------- - -----
--
---
------ -------------------
---
----- ------------ - --- --------------
---- --------------------------------
----- --------------------------------
---在组件中使用 GraphQL 查询
现在我们已经设置好了 Apollo 客户端，接下来我们将在组件中使用 GraphQL 查询。
首先，我们需要定义一些 GraphQL 查询。我们将使用 .graphql 文件来定义我们的查询，并使用 graphql-tag 库来解析这些查询。
在这个例子中，我们定义了一个查询 getBooks，用于获取所有的图书信息，并返回每本图书的 title 和 author。
query getBooks {
books {
title
author
}
}接下来，在 Vue.js 组件中，我们通过使用 apollo 选项来进行查询。
-- -------------------- ---- -------
----------
---- -------------------------------
---- ----------- -- ------ ------------------
------ ---------- -------
------ ----------- -------
------
-----------
--------
------ - --- - ---- --------------
------ ------- -
----- --------
------- -
------ -
------ ----
----- -------- -
----- -
-----
------
-
-
--
--
--
--
---------在上面的例子中，我们使用 apollo 选项进行查询。books 对应于我们在查询中定义的名称。我们还可以通过 loading 和 error 属性来处理查询的加载和错误状态。
在组件中使用 GraphQL 变量
在某些情况下，我们需要在查询中使用参数。GraphQL 提供了 variables 关键字来处理参数，并使用 $ 符号来引用变量。在 Vue.js 中，我们可以在 apollo 选项中使用 variables 来指定变量的值。
以下是一个使用变量的示例查询，它可以根据输入的 id 获取图书的详细信息。
query getBook($id: ID!) {
book(id: $id) {
title
author
description
}
}在组件中使用变量的示例代码如下。
-- -------------------- ---- -------
----------
---- -------------------------------
---- ------------
------ ---------- -------
------ ----------- -------
----- ---------------- ------
------
-----------
--------
------ - --- - ---- --------------
------ ------- -
----- -------
------- -
----- -
------ ----
----- ------------ ---- -
-------- ---- -
-----
------
-----------
-
-
--
----------- -
------ -
--- ----------------------
--
--
--
--
--
---------在上面的例子中，我们通过 $route 对象来获取路由参数 id 的值，并将其传递给 variables 函数。
在组件中发送 GraphQL 变更
GraphQL 还支持发送变更（mutation）。变更用于修改或删除数据，与查询类似，我们也可以在组件中使用 apollo 选项来发送变更。
以下是一个示例变更，它可以添加一本新的图书到书库中。
mutation addBook($title: String!, $author: String!) {
addBook(title: $title, author: $author) {
id
title
author
}
}在组件中使用变更的示例代码如下。
-- -------------------- ---- -------
----------
----- --------------------------
------ --------------- ------------------- --
------ ---------------- -------------------- --
------- ----------------- -------------
-------
-----------
--------
------ - --- - ---- --------------
------ ------- -
----- ----------
------ -
------ -
------ ---
------- ---
--
--
-------- -
----- --------- -
----- -------- - ----- ---------------------
--------- ----
-------- --------------- -------- -------- -------- -
-------------- ------- ------- -------- -
--
-----
------
-
-
--
---------- -
------ -----------
------- ------------
--
---
-- ----------
--
--
--
---------在上面的例子中，我们使用 mutate 方法来发送变更。我们将变更定义为一个 mutation，并使用 variables 属性来指定变量的值。在响应返回后，我们可以对数据进行处理，并更新现有的视图组件。
总结
在本文中，我们学习了如何在 Vue.js 中使用 GraphQL 和 Apollo。我们介绍了如何设置和配置 Apollo 客户端，如何在组件中进行查询，并展示了如何处理返回的数据。我们相信，这些知识可以帮助您更好地为您的 Vue.js 应用编写 GraphQL 代码，提高开发效率。
请记得，GraphQL 和 Apollo 并不是万能的，根据您的项目特点和团队的能力来选择合适的技术栈。愿你生活愉快，开发愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64717918968c7c53b0f56464