简介
Next.js 是一种流行的 React 框架，可以帮助开发者快速构建 Web 应用程序。Apollo 是一款非常强大的 GraphQL 客户端，用于在前端应用程序中管理数据。在接下来的文章中，我们将探讨 Apollo 如何与 Next.js 结合使用，以及如何在应用程序中管理数据。
如何在 Next.js 中使用 Apollo
安装
在使用 Apollo 之前，首先需要安装 Apollo 客户端。我们可以通过 npm 来安装 Apollo：
npm install apollo-boost graphql
我们还需要安装 @apollo/react-hooks Hooks，这是一种上传和接收数据的最为直观的方式。你可以这么安装：
npm install @apollo/react-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
