GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、强大的方式来获取数据。在 Vue 中，我们可以使用一些库来与 GraphQL 进行交互，例如 vue-apollo 和 graphql-request。本文将介绍如何在 Vue 中使用这些库来进行 GraphQL 查询，并提供详细的示例代码。
安装依赖
在使用 GraphQL 前，我们需要安装一些依赖。如果您使用的是 vue-cli，则可以使用以下命令安装：
npm install apollo-boost vue-apollo graphql graphql-tag
如果您想使用 graphql-request，则可以使用以下命令安装：
npm install graphql-request
在 Vue 中使用 vue-apollo
vue-apollo 是一个为 Vue 开发的 GraphQL 客户端。它提供了一些有用的功能，例如将 GraphQL 查询结果缓存到 Vuex 中，以及在组件中使用 GraphQL 查询。
配置 vue-apollo
在使用 vue-apollo 前，我们需要在 Vue 中配置。首先，在 main.js 中导入 vue-apollo，并创建一个 apolloProvider：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------ ------ ------------ ---- -------------- ----- ------------ - --- -------------- ---- ----------------------------- -- ----- -------------- - --- ----------- -------------- ------------- -- ------------------ --- ----- --------------- ------- - -- ------- -----------------展开代码
在上面的代码中，我们首先创建了一个 ApolloClient，并将其传递给 VueApollo。然后，我们将 apolloProvider 注册到 Vue 实例中。
在组件中查询数据
在 Vue 组件中使用 vue-apollo 查询数据非常简单。我们可以使用 apollo 选项来执行 GraphQL 查询。例如，以下代码查询了一个名为 user 的用户：
-- -------------------- ---- ------- ---------- ----- ------- ----- -- --------- ------ ------ ----------- -------- ------ --- ---- ------------- ------ ------- - ------- - ----- ---- ----- - ---- - ---- - - -- -- - ---------展开代码
在上面的代码中，我们使用了 gql 函数来定义 GraphQL 查询。然后，在 apollo 选项中定义了一个名为 user 的查询。在组件中，我们可以像使用普通的数据属性一样使用 user。
在组件中使用 vue-apollo 的其他功能
vue-apollo 还提供了其他一些有用的功能。例如，我们可以使用 this.$apollo.queries 来访问所有查询的状态。以下代码演示了如何在组件中使用这个功能：
-- -------------------- ---- ------- ---------- ----- ------- ----- -- --------- ------ -- ----------------------------- -- ------------------- -- ------------- ------ ------ ----------- -------- ------ --- ---- ------------- ------ ------- - ------- - ----- ---- ----- - ---- - ---- - - -- -- --------- - --------- - ------ --------------------------------- -- ------- - ------ ------------------------------- -- -- - ---------展开代码
在上面的代码中，我们定义了两个计算属性 loading 和 error，它们分别返回查询的加载状态和错误信息。在模板中，我们可以使用这些计算属性来显示加载状态和错误信息。
在 Vue 中使用 graphql-request
graphql-request 是一个简单的 GraphQL 客户端，它可以与任何 JavaScript 库一起使用。它提供了一些有用的功能，例如自动扁平化查询结果和使用变量进行查询。
发送查询
在使用 graphql-request 前，我们需要创建一个 GraphQLClient。以下代码演示了如何创建一个 GraphQLClient：
import { GraphQLClient } from 'graphql-request' const client = new GraphQLClient('https://example.com/graphql')
在上面的代码中，我们创建了一个名为 client 的 GraphQLClient，并将其连接到 GraphQL 服务器。
要发送一个查询，我们可以调用 client.request 方法，并传递一个 GraphQL 查询字符串。例如，以下代码查询了一个名为 user 的用户：
-- -------------------- ---- ------- ----- ----- - - ----- - ---- - ---- - - - ------------------------------- -- ------------------展开代码
在上面的代码中，我们定义了一个名为 query 的 GraphQL 查询字符串，并使用 client.request 方法发送查询。查询结果将通过 then 方法返回。
使用变量进行查询
在 GraphQL 中，我们可以使用变量来传递参数。要在 graphql-request 中使用变量，我们可以将变量作为第二个参数传递给 client.request 方法。例如，以下代码查询了一个名为 user 的用户，并使用变量 id 来指定用户的 ID：
-- -------------------- ---- ------- ----- ----- - - ---------- ---- - -------- ---- - ---- - - - ----- --------- - - --- ----- - --------------------- -------------------- -- ------------------展开代码
在上面的代码中，我们定义了一个带有变量的 GraphQL 查询字符串，并将变量作为第二个参数传递给 client.request 方法。在查询中，我们使用 $id 来指定变量的名称，并使用 ! 来指定变量为必填项。
在 Vue 中使用 graphql-request
要在 Vue 中使用 graphql-request，我们可以将其与 vue-property-decorator 一起使用。以下代码演示了如何在 Vue 组件中使用 graphql-request：
-- -------------------- ---- ------- ---------- ----- ------- ----- -- --------- ------ ------ ----------- -------- ------ - ---------- --- - ---- ------------------------ ------ - --- - ---- ----------------- ----- ----- - ---- ----- - ---- - ---- - - - ---------- ------ ------- ----- ----------- ------- --- - ----- --- - -- ----- --------- - ----- ---- - ----- ---------------------------- --------- - --------- - - ---------展开代码
在上面的代码中，我们首先导入了 vue-property-decorator 和 graphql-request。然后，我们定义了一个名为 query 的 GraphQL 查询。在组件中，我们使用 created 钩子来执行查询，并将查询结果赋值给 user 属性。
结论
在本文中，我们介绍了如何在 Vue 中使用 GraphQL。我们讨论了两个常用的 GraphQL 客户端库，vue-apollo 和 graphql-request，并提供了详细的示例代码。希望这篇文章能够帮助您在 Vue 中更好地使用 GraphQL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6778e718381bbe667f8a9b07
