GraphQL 是一种新型的 API 查询语言和运行时，它允许前端开发者按需请求所需数据。在传统的 RESTful API 中，前端需要通过多个 API 调用来获取所需数据，而 GraphQL 可以通过一次 API 查询请求来获取所有需要的数据。Next.js 是一款 React 框架，可以帮助前端开发人员快速开发 React 应用程序，并且支持服务器渲染和静态导出静态网站。Apollo 是一个用于构建 GraphQL 客户端的开源框架。在本篇文章中，我们将深入探讨如何使用 Next.js 和 Apollo 构建基于 GraphQL 的应用程序。
安装 Next.js 和 Apollo
在开始构建基于 GraphQL 的应用程序之前，请确保您已经安装了最新版本的 Node.js 和 npm。在安装 Next.js 和 Apollo 之前，您需要创建一个新的 React 应用程序。运行以下命令以创建一个新的 React 应用程序。
npx create-next-app myapp
在运行此命令后，您将在您的计算机上创建一个名为 myapp 的新 React 应用程序。接下来，您需要在您的应用程序中安装 Apollo 和相关依赖。
npm install --save apollo-boost react-apollo graphql
现在，我们已经完成了安装 Next.js 和 Apollo 的过程。接下来，我们将深入探讨如何在 Next.js 应用程序中使用 Apollo。
创建 GraphQL 查询
在开始创建基于 GraphQL 的应用程序之前，请确保您已经熟悉 GraphQL 语法。在本教程中，我们将创建一个基于 GraphQL 的应用程序，该应用程序将从 Swapi，即 Star Wars API 中获取数据。我们将创建明智的人物卡片，以显示每个人物的名称和电影数量。首先，在您的 Next.js 应用程序中创建一个新的 GraphQL 查询。在 Next.js 中，您可以在 pages/api 文件夹中创建一个新的文件来处理 GraphQL 查询。我们将创建一个名为 characters.js 的新文件，在该文件中将处理所有人物的查询。
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- -----------------
----- ------ - --- --------------
---- -------------------------------------------------------------
------ --- ----------------
---
------ ------- ----- ----- ---- -- -
----- ----- - ----
-
--------- -
------ -
----
-------------- -
----------
-
-
-
-
--
----- - ---- - - ----- -------------- ----- ---
---------------
--在此文件中，我们首先创建了一个新的 ApolloClient 对象来连接到 Swapi GraphQL API。然后，我们定义了一个名为 query 的新 GraphQL 查询，该查询将返回所有人物的名称和电影数量。最后，我们通过调用 client.query 方法来调用 GraphQL 查询，并最终返回查询结果。
为了能够正确地呈现我们的人物卡片，我们需要一个客户端来调用我们的新 GraphQL 查询。继续进行下一步操作以创建新的客户端。
创建客户端代码
在您的 Next.js 应用程序中创建一个新的 React 组件，该组件将作为客户端来处理 GraphQL 查询。在此示例中，我们创建一个名为 CharacterList 的新组件。接下来，将以下代码添加到您的新组件中。
-- -------------------- ---- -------
------ - --------- --- - ---- -----------------
----- ----- - ----
-
--------- -
------ -
----
-------------- -
----------
-
-
-
-
--
----- ------------- - -- -- -
----- - -------- ------ ---- - - ----------------
-- --------- ------ -------------
-- ------- ------ ------- ------------------
------ -
-----
-------------------------------------- -- -
------ -
---- ---------------------
-------------------------
--------- -----------------------------------------
------
--
---
------
--
--
------ ------- --------------在此代码中，我们使用 useQuery 钩子来调用我们先前定义的 GraphQL 查询。如果数据正在加载或如果发生错误，则组件将返回相应的内容。否则，我们将返回一组明智的人物卡片，以显示每个人物的名称和电影数量。
现在，我们已经完成了客户端代码的编写。接下来，我们需要将客户端代码集成到我们的 Next.js 应用程序中。
集成客户端代码
在 Next.js 应用程序中集成客户端代码非常简单。首先，在您的 Next.js 应用程序中创建一个新的页面，该页面将显示您的明智的人物卡片。然后，将以下代码添加到您的新页面中。
-- -------------------- ---- -------
------ ------------- ---- ------------------------------
----- --------- - -- -- -
------ -
-----
-------- ---- ---------------
-------------- --
------
--
--
------ ------- ----------在此代码中，我们在页面中导入了我们之前创建的 CharacterList 组件，并在页面中渲染该组件。此外，该页面还包括一个标题，该标题用于警告用户这是 Star Wars 人物卡片的页面。
在运行您的 Next.js 应用程序后，您应该可以访问您的新页面，并在页面上看到每个明智人物的卡片，其中显示了人物名称和电影数量。
结论
在本篇文章中，我们深入探讨了如何使用 Next.js 和 Apollo 构建基于 GraphQL 的应用程序。我们创建了一个新的 GraphQL 查询，然后定义了一个用于处理查询的客户端组件，并将客户端组件集成到我们的 Next.js 应用程序中。该应用程序将从 Swapi API 中获取数据，并以卡片形式呈现每个明智人物的名称和电影数量。这个示例不仅教会了您如何使用 Next.js 和 Apollo 来构建 GraphQL 应用程序，而且还为您提供了一个适用于学习和指导实际项目的完整代码示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ea989eedcc8a97c8a6594