在现代网站和应用程序中，前端通常使用 GraphQL 作为查询 API。GraphQL-Yoga 是一个流行的小型 GraphQL 服务器，可用于快速构建可扩展的 GraphQL API。在本篇文章中，我们将重点介绍如何在 Next.js 中使用 GraphQL-Yoga。
第一步：安装和配置
安装 graphql-yoga 和 apollo-boost（可选，用于客户端 GraphQL 查询）：
npm install graphql-yoga apollo-boost
在 pages/api 文件夹中创建新文件 graphql.js，并将以下代码复制到该文件中：
-- -------------------- ---- -------
------ - ------------- - ---- ---------------
----- -------- - -
---- ----- -
----------- -------- -------
-
--
----- --------- - -
------ -
------ --- - ---- -- -- ------ ------ -- ----------
--
--
----- ------ - --- --------------- --------- --------- ---
------ ------- ---------------------- ----- -------------- ---在上面的代码中，我们定义了一个名为 hello 的查询，它接收一个名为 name 的参数并返回“Hello，{name}”或“Hello，World”字符串。我们还创建了一个 GraphQL 服务器并将其导出为默认模块。服务器将在 /api/graphql 路径上公开。
第二步：测试 GraphQL API
将 Next.js 应用程序启动后，可以使用 Insomnia 或 GraphQL Playground 等工具来测试我们的 GraphQL API。在查询字符串中键入以下内容：
query {
hello(name: "Alice")
}应该会在下面的响应中看到“Hello，Alice”的字符串。
第三步：连接 Next.js 和 GraphQL API
让我们为我们的 Next.js 应用程序创建一个简单的页面，它通过 GraphQL API 读取数据。创建一个名为 index.js 的新文件，在页面上返回“Hello，{name}”或“Hello，World”字符串。
-- -------------------- ---- -------
------ - -------- - ---- ----------------------
------ --- ---- --------------
----- ----------- - ----
----- ------------ ------- -
----------- ------
-
--
-------- ------ -
----- - ---- - - --------------------- - ---------- - ----- ------- - ---
------ -
-----
--------- - ---------- - ------------------
------
--
-
------ ------- -----在上面的代码中，我们使用 useQuery 将 GraphQL 查询 HELLO_QUERY 中的数据提供给组件，并将 “Alice” 作为变量提供给查询。在组件的 return 语句中，我们通过 data.hello 将查询的响应打印到页面上。
我们还需要在 pages/_app.js 中包装我们的应用程序与 Apollo 客户端：
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- -----------
------ - -------------- - ---- ----------------------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- ---------------
---
----- ----- ------- --- -
-------- -
----- - ---------- --------- - - -----------
------ -
--------------- ----------------
---------- -------------- --
-----------------
--
-
-
------ ------- ------在上面的代码中，我们创建了一个 Apollo 客户端，该客户端将发送到 http://localhost:3000/api/graphql，即我们定义的 GraphQL 服务器。在我们的 _app.js 文件中，我们包装了我们的 Next.js 应用程序，并将 ApolloProvider 包装在顶部，以便在整个应用程序中使用 Apollo 客户端。
结论
在本文中，我们已经学习了如何使用 GraphQL-Yoga 在 Next.js 应用程序中构建 GraphQL API，并演示了如何从 Next.js 中的页面使用 Apollo 客户端查询数据。GraphQL 在许多现代应用程序中已成为常见的查询 API，了解如何使用 GraphQL-Yoga 和 Next.js 将是一件有用的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff75ac1b0bf82c71c9fe19