简介
Next.js 是一种流行的 React 框架，可以帮助开发者快速构建 Web 应用程序。Apollo 是一款非常强大的 GraphQL 客户端，用于在前端应用程序中管理数据。在接下来的文章中，我们将探讨 Apollo 如何与 Next.js 结合使用，以及如何在应用程序中管理数据。
如何在 Next.js 中使用 Apollo
安装
在使用 Apollo 之前，首先需要安装 Apollo 客户端。我们可以通过 npm 来安装 Apollo：
--- ------- ------------ -------
我们还需要安装 @apollo/react-hooks Hooks，这是一种上传和接收数据的最为直观的方式。你可以这么安装：
--- ------- -------------------
配置
为了使 Apollo 在 Next.js 中可用，我们需要在 _app.js 文件中添加 Apollo 的配置选项。这个文件是 Next.js 应用程序的根组件，可以在每个页面中使用。
------ - -------------- - ---- ----------------------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- ---------------------------------------------
---
-------- ------- ---------- --------- -- -
------ -
--------------- ----------------
---------- -------------- --
-----------------
--
-
------ ------- ------在上面的代码中，我们向ApolloProvider传递了一个client，它是一个类似 React-Redux 的 Provider 组件。这个客户端是由 Apollo 官方提供的，它具有支持 GraphQL 响应和 Apollo 调试工具的所有功能。
在这个例子中，我们将 URI 设置为一个天气 API，这个 API 公开的 GraphQL 端口可以通过 URL 访问。
接下来，我们可以添加获取数据的组件。我们将使用Query组件，它是 Apollo React 组件库中的一个GraphQL 查询组件。
------ --- ---- --------------
------ - -------- - ---- ----------------------
----- ----- - ----
-
------------------- --------- -
------- -
------- -
-----
-
-
-
-
--
-------- --------- -
----- - -------- ------ ---- - - ----------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
--
-------------
-------------------------------------------------
---
--
-
------ ------- -- -- -
-----
-------- --
------
--在上述代码中，我们创建了一个名为“获取天气”的函数组件。在这个组件中，我们可以使用useQueryProps 来执行 GraphQl 查询方法，并用当前数据渲染应用程序。
这里我们的恒定查询就是从 API 获取伦敦的天气摘要。
结论
在本篇文章中，我们探讨了如何在 Next.js 应用程序中使用 Apollo 客户端。我们了解了 Apollo 的一些基础知识，同时学习了使用示例。希望这篇文章对你在使用 Next.js 和 Apollo 中有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6716fcd8ad1e889fe21ef1b3