介绍
Next.js 是一款由 Vercel 开发的 React 应用程序的轻量级框架。它简化了开发过程，并提供了一些内置功能，如服务器渲染和静态导出等。而 Apollo Client 是一款流行的 GraphQL 客户端，它允许开发者轻松地从远程服务器获取数据。
在本文中，我们将探讨如何在 Next.js 应用中使用 Apollo Client，并使页面更加快速和动态。
安装
要在 Next.js 中使用 Apollo Client，您需要安装以下两个库：
@apollo/client：Apollo Client 的主要库。graphql：GraphQL 查询语言的 JavaScript 实现。
您可以使用 npm 或 yarn 安装这两个库。例如，使用 npm 安装：
npm install @apollo/client graphql
使用示例
在接下来的几节中，我们将介绍如何在 Next.js 中使用 Apollo Client。以下面的示例为例。假设我们正在构建一个电影列表应用程序，该应用程序从远程服务器获取电影数据。首先，我们需要创建一个文件夹 /lib 并在其中创建一个 Apollo Client。
- 创建
lib/apolloClient.js文件：
import { ApolloClient, InMemoryCache } from "@apollo/client";
const client = new ApolloClient({
uri: "https://some-graphql-endpoint.com",
cache: new InMemoryCache(),
});
export default client;在这里，我们创建了一个名为 client 的 Apollo 客户端，并传入一个 URL。这个 URL 是指向我们的 GraphQL API 的终端节点地址。这个终端节点可以是我们自己的后端服务器或者一个第三方服务提供商（如 GraphCMS、Hasura 等）。
我们还传递了一个缓存选项，以便我们可以缓存从服务器返回的数据并提高性能。
- 在
_app.js文件中使用 Apollo Provider：
-- -------------------- ---- -------
------ - -------------- - ---- -----------------
------ ------ ---- ----------------------
-------- ------- ---------- --------- -- -
------ -
--------------- ----------------
---------- -------------- --
-----------------
--
-
------ ------- ------在这里，我们使用 ApolloProvider 将 Apollo 客户端传递给 Next.js 应用程序。这样，我们的所有页面都可以使用 Apollo Client 来获取数据。在这个示例中，我们假设 MyApp 是我们的应用程序的根组件。
- 在页面中使用 GQL 查询：
-- -------------------- ---- -------
------ - ---- -------- - ---- -----------------
----- ------------ - ----
----- ------ -
------ -
--
-----
----
-----------
-
-
--
------ ------- -------- -------- -
----- - -------- ------ ---- - - -----------------------
-- --------- ------ ---------- --------
-- ------- ------ -------- -------
------ -
--
---------------
----
------------------------ -- -
--- ---------------------------------
---
-----
---
--
-在这里，我们使用 gql 帮助我们定义 GraphQL 查询。然后使用 useQuery 将查询传递给 Apollo 客户端。如果数据正在加载，我们在页面上显示 "Loading ..."，如果出现错误，则显示 "Error :("，否则我们将显示电影列表。
总结
本文中，我们介绍了如何在 Next.js 应用程序中使用 Apollo Client。我们创建了一个文件夹 /lib 并制定了一个 Apollo 客户端。然后，我们使用 ApolloProvider 将客户端注入到应用程序中，并在页面中使用 useQuery 来获取数据。
使用 Apollo Client 可以使我们的页面更加动态和快速。我们可以使用它来获取来自远程服务器的数据，并将数据缓存在客户端中以供再次使用。
如果您想了解更多关于 Next.js 与 Apollo Client 的用法，请查阅其官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb67ef5ad90b6d0420650c