前言
GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、更强大、更灵活的方式来获取数据。Apollo 是一个支持 GraphQL 的开发平台，它提供了一套完整的解决方案，包括客户端和服务器端的库和工具。在本文中，我们将探讨如何在 Vue.js 2 中使用 GraphQL 和 Apollo，以及如何将它们集成到我们的项目中。
准备工作
在开始之前，我们需要安装一些必要的依赖。首先，我们需要安装 Vue.js 2 和 Apollo Client：
npm install vue apollo-client graphql
接下来，我们需要安装一个 GraphQL 服务器。在本文中，我们将使用 GraphQLHub，一个基于 GraphQL 的 API 集合。我们可以使用以下命令来安装 GraphQLHub：
npm install graphqlhub-official
创建 Apollo 客户端
在我们可以开始使用 Apollo 进行查询之前，我们需要创建一个 Apollo 客户端。我们可以使用以下代码创建一个 Apollo 客户端：
-- -------------------- ---- ------- ------ ------------ ---- ---------------- ------ - -------- - ---- ------------------- ------ - ------------- - ---- ------------------------ ----- -------- - --- ---------- ---- ------------------------------------- --- ----- ------ - --- -------------- ----- --------- ------ --- ---------------- ---展开代码
在上面的代码中，我们首先导入了所需的依赖。然后，我们创建了一个 HttpLink 对象，它将我们的 GraphQL 查询发送到远程服务器。接下来，我们创建了一个 ApolloClient 对象，它将我们的 HttpLink 对象和一个 InMemoryCache 对象组合在一起。这个 InMemoryCache 对象将缓存我们的查询结果，以便我们可以更快地获取数据。
创建 Vue.js 组件
接下来，我们需要创建一个 Vue.js 组件，它将使用我们刚刚创建的 Apollo 客户端来获取数据。我们可以使用以下代码创建一个简单的 Vue.js 组件：
-- -------------------- ---- ------- ---------- ----- ---- --- ----------- -- ------ ----------------- ---------- ------- ----- ------ ----------- -------- ------ --- ---- -------------- ------ ------- - ------ - ------ - ------ --- -- -- ------- - ------ - ------ ---- - -- - ----------------- --- - -- ----- --- - - - -- -- -- -- ---------展开代码
在上面的代码中，我们首先定义了一个简单的 Vue.js 模板，它将显示我们获取的数据。然后，我们导入了 gql 函数，它将帮助我们定义我们的 GraphQL 查询。接下来，我们定义了一个名为 posts 的数据属性，并使用 apollo 选项将其与我们的查询关联起来。在这个查询中，我们请求了 hn（Hacker News）的顶部故事，并限制了结果集的大小为 10。我们还定义了我们想要获取的每个故事的 id、标题和 URL。
运行应用程序
现在，我们已经准备好运行我们的应用程序了。我们可以使用以下命令在本地启动一个开发服务器：
npm run serve然后，我们可以在浏览器中访问 http://localhost:8080，查看我们的应用程序。如果一切正常，我们应该能够看到一个包含 hn 的顶部故事的列表。
总结
在本文中，我们探讨了如何在 Vue.js 2 中使用 GraphQL 和 Apollo。我们首先创建了一个 Apollo 客户端，然后使用它来获取数据。接下来，我们创建了一个简单的 Vue.js 组件，它使用我们的 Apollo 客户端来查询 hn 的顶部故事。最后，我们运行了我们的应用程序，并在浏览器中查看了结果。希望这篇文章能够帮助你了解如何使用 GraphQL 和 Apollo 在 Vue.js 2 中获取数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65584babd2f5e1655d27f66f
