GraphQL 是现代化的 API 查询语言和运行时，它是面向客户端的 API，由 Facebook 开发并首次在 2015 年公开发布。GraphQL 旨在解决 REST API 的缺点，如过度获取或未能满足查询需求等问题。它支持前端和后端开发人员在相同的查询语言中编写、测试和部署 API。在 Next.js 中使用 GraphQL 可以简化前端的数据获取过程并提高系统的性能。
步骤
要在 Next.js 中使用 GraphQL，有以下几个步骤：
- 正确安装必需的 NPM 软件包。
GraphQL 的开发商提供了很多不同的库，用来支持在不同环境中实现 GraphQL。要在 Next.js 中使用 GraphQL，您需要安装一些关键的 NPM 软件包以便能够整合 GraphQL 查询和响应。这些软件包的安装方法如下：
npm install apollo-boost graphql react-apollo
- 向 Next.js 应用程序中添加一个 Apollo 客户端。
通过将 Apollo 客户端添加到 Next.js 应用程序中，您可以简化用于获取和处理数据的工作流。要添加 Apollo 客户端，请完成以下步骤：
首先，在 Next.js 应用程序中创建一个新文件夹（例如，设置名为 lib），然后在其中添加一个新文件（例如，命名为 client.js）。您可以使用以下代码初始化 Apollo 客户端：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ------ - -------- - ---- ------------------- ------ - ------------- - ---- ------------------------ ----- ---------------- - ---------------------- ----- -------- - --- ---------- ---- ----------------- --- ----- ----- - --- ---------------- ----- ------ - --- -------------- ----- --------- ------ ------ --- ------ ------- -------
其中，GRAPHQL_ENDPOINT 是您的 GraphQL API 端点的 URL。此代码创建了一个 Apollo 客户端实例并将其放置于私有命名空间中，以便其他组件可以使用它来发出数据查询和更改请求。
接下来，您需要确保 Next.js 应用程序可以访问此客户端。要做到这一点，请在 Next.js 应用程序中创建一个高阶组件并返回一个新的组件，该组件可以访问 Apollo 客户端。以下代码演示了如何完成此操作：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ---------------
------ ------------ ---- -----------
------ -------- --------------------- -
------ -------- ------------ -------- -- -
------ -
--------------- ----------------------
---------- ---------- --
-----------------
--
--
-此高阶组件将 Apollo 客户端提供程序包装在 Next.js 应用程序中的组件中。请注意，此代码中的 ApolloProvider 组件始终从名为 client 的默认导入中检索客户端实例。
- 向 Next.js 中添加 graphQL 查询。
现在您已经成功安装了必需的 NPM 软件包和初始化了 Apollo 客户端，接下来需要使用 GraphQL 查询定义并发送数据请求。您可以通过创建一个 JavaScript 模块来完成此操作，该模块导出一个 query 变量和一个函数，其中该函数使用 Apollo 客户端来执行查询并返回结果。以下代码演示了如何创建这样的模块：
-- -------------------- ---- -------
------ --- ---- --------------
------ ------------ ---- -----------
------ ----- --------- - ----
----- -
----- -
--
-----
----
-
-
--
------ ----- -------- ---------- -
----- - ---- - - ----- --------------------
------ ----------
---
------ -----------
-此代码定义了一个名为 GET_POSTS 的 GraphQL 查询，并实现了一个名为 getPosts 的函数，该函数使用 Apollo 客户端查询从 GraphQL API 中检索所有帖子。请注意，此 codepen import 了 ApolloClient from './client'，此代码中的 gql 组件来自导入 graphql-tag。您可以通过更改此查询和相关函数来创建任意数量的查询和 API 调用，来满足您的业务需求。
案例分析：使用 Next.js 和 GraphQL 获取数据
假设您的 Next.js 应用程序需要从远程 GraphQL API 加载数据并在页面中呈现。下面是一些代码片段，该示例演示了如何加载 GraphQL 数据并在 Next.js 中使用它渲染组件。
为了设置这个例子，您需要一个远程服务器和 GraphQL API。 Facebook 提供了一个简单的 GraphQL API（https://swapi-graphql.netlify.app/.），其允许您从“星球大战”的官方 API 中加载数据。无论您使用哪个 GraphQL API，都可以使用下面的示例代码来说明如何使用GraphQL API 加载和渲染数据。
首先在 Next.js 应用程序中创建一个空白页面（如 index.js），然后添加以下内容以在加载组件时加载限定的 GraphQL 数据：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - --- - ---- --------------
------ ---- ---- ------------
------ - -------- - ---- ----------------------
----- ------------- - ----
----- -
------------ -
----- -
---- -
----
-
-
-
-
--
-------- ---------- -
----- - -------- ------ ---- - - ------------------------
-- --------- -
------ ------------ ----------
-
-- ------- -
---------------------
------ ---------- ------- -------------
-
------ -
-----
-------- ---- --------------
----
------------------------------- ---- -- -- -
--- ----------------
----- ----------------------------------------------------
------------------
-------
-----
---
-----
------
--
-
------ ------- ---------------------在此代码中，使用用于 Next.js 的 Apollo 高阶组件的 withApollo 方法，在页面组件 HomePage 上注入了 Apollo 客户端（间接通过 useQuery 标记）。然后使用 useQuery 将 GraphQL 查询和 React 组件进行了绑定。
总结
GraphQL 是一种先进的 API 语言和运行时，用于更高效、更透明地创建更好的 API。Next.js 可使您使用 GraphQL 更轻松地获取数据并将其用于创建用户界面。随着您的 Next.js 应用程序的规模和复杂性的增加，使用 GraphQL 的好处将变得更加明显。上述指南包含了使用 GraphQL 和 Next.js 的基础知识，以及演示了如何加载和渲染 GraphQL 数据的示例代码。现在，通过这些知识来开始构建您的 Next.js 应用程序，从而加速开发和优化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a491f6add4f0e0ffcdfcf1