GraphQL 是一种用于 API 的查询语言，它可以让前端工程师自由地查询需要的数据。在 Next.js 中，我们可以轻松地使用 GraphQL。本文将为您介绍如何在 Next.js 中使用 GraphQL 数据。
准备工作
在开始使用 GraphQL 之前，我们需要准备一些工具和资源。
安装 Node.js 和 npm
在使用 Next.js 和 GraphQL 之前，您需要安装 Node.js 和 npm。可以从官网下载和安装，或者使用包管理器安装。
创建 Next.js 应用程序
我们需要创建一个 Next.js 应用程序。可以使用 npx 命令创建一个新的 Next.js 应用程序。
npx create-next-app my-app
安装必要的依赖
接下来，您需要在 Next.js 应用程序中安装必要的依赖。
npm install react-apollo apollo-boost
准备 GraphQL API
我们需要有一个 GraphQL API，供我们在 Next.js 中使用。可以使用现有的 GraphQL API，或者创建一个自己的 GraphQL API。
如何使用 GraphQL 数据？
现在我们已经准备好了使用 GraphQL 数据。接下来，我们将为您介绍如何在 Next.js 中使用 GraphQL 数据。
在 Next.js 中配置 Apollo Client
在使用 GraphQL 数据之前，我们需要为 Next.js 应用程序配置 Apollo Client。Apollo Client 是用于将 Next.js 应用程序连接到 GraphQL API 的客户端库。可以使用以下代码将 Apollo Client 添加到 Next.js 应用程序中。
-- -------------------- ---- -------
------ - -------------- - ---- ---------------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- --------------------------
---
-------- ------- ---------- --------- -- -
------ -
--------------- ----------------
---------- -------------- --
-----------------
--
-
------ ------- ------在 Next.js 中查询 GraphQL 数据
现在我们已经配置了 Apollo Client，接下来我们将在 Next.js 中查询 GraphQL 数据。可以使用以下代码在 Next.js 中查询 GraphQL 数据。
-- -------------------- ---- -------
------ - ----- - ---- ---------------
------ --- ---- --------------
----- -------- - ----
----- -
----- -
--
----
-
-
--
------ ------- -------- ------ -
------ -
------ -----------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
---------------------- -- -
--- ------------------------------
---
-----
--
--
--------
--
-以上代码会查询 GraphQL API 中的所有用户，并在页面上显示他们的姓名。
总结
本文介绍了如何在 Next.js 中使用 GraphQL 数据。我们学习了如何在 Next.js 中配置 Apollo Client 和查询 GraphQL 数据。在您的下一个 Next.js 项目中，不要忘记使用 GraphQL 收集您的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b4432968c7c53b06c74c1