如何使用 Next.js API 路由构建 GraphQL 服务器

已发表: 2022-03-10

快速总结↬本指南将教您 Next.js API 路由的基础知识。我们将首先解释它们是什么以及为什么 API 路由与 REST 或 GraphQL API 相比有用。然后，我们将指导您逐步完成教程，了解如何使用 Next.js 和 Github API 构建您的第一个 GraphQL 服务器。

Next.js 为您提供最佳的开发人员体验，其中包含生产所需的所有功能。它提供了一个使用 Next.js API 路由构建 API 的简单解决方案。

在本指南中，我们将首先了解什么是 API 路由，然后创建一个使用 Next.js API 路由从 Github API 检索数据的 GraphQL 服务器。

要充分利用本教程，您至少需要对 GraphQL 有基本的了解。了解 Apollo Server 会有所帮助，但不是强制性的。本教程将使那些想要将他们的 React 或 Next.js 技能扩展到服务器端并能够使用 Next.js 和 GraphQL 构建他们的第一个全栈应用程序的人受益。

所以，让我们潜入吧。

什么是 Next.js API 路由？

Next.js 是一个框架，可以在客户端或/和服务器上渲染 React 应用程序。从版本 9 开始，Next.js 现在可用于使用 Node.js、Express、GrapQL 等构建 API。 Next.js 使用文件系统将文件夹pages/api中的文件视为 API 端点。这意味着，现在，您将能够通过 URL https://localhost:3000/api/your-file-name访问您的 API 端点。

如果你来自 React 并且从未使用过 Next.js，这可能会让人感到困惑，因为 Next.js 是一个 React 框架。正如我们已经知道的那样，React 用于构建前端应用程序。那么为什么将 Next.js 用于后端应用程序和 API 呢？

嗯，Next.js 可以在客户端和服务器端使用，因为它是用 React、Node.js、Babel 和 Webpack 构建的，显然它也应该可以在服务器端使用。 Next.js 依赖于服务器来启用 API 路由，并允许您使用您最喜欢的后端语言，即使它在技术上是一个 React 框架。希望你做对了。

到目前为止，我们已经了解了 API 路由是什么。然而，真正的问题仍然存在：为什么要使用 Next.js 来构建 GraphQL 服务器？为什么不使用 GraphQL 或 Node.js 来实现呢？因此，让我们在下一节将 Next.js API 路由与用于构建 API 的现有解决方案进行比较。

Next.js API 路由与 REST 和 GraphQL

GraphQL 和 REST 是构建 API 的好方法。它们非常受欢迎，现在几乎每个开发人员都在使用它们。那么，为什么要使用 React 框架来构建 API？好吧，快速回答是 Next.js API 路由有不同的用途，因为 API 路由允许您通过添加后端来扩展 Next.js 应用程序。

构建 API 有更好的解决方案，例如 Node.js、Express、GraphQL 等，因为它们专注于后端。在我看来，API Routes 应该与客户端相结合，以使用 Next.js 构建一个全栈应用程序。使用 API Routes 构建一个简单的 API 就像没有充分利用 Next.js 的功能，因为它是一个 React 框架，可以让您立即添加后端。

当您需要向现有的 Next App 添加身份验证时，请考虑用例。您可以使用 API Routes 向您的应用程序添加身份验证，而不是使用 Node.js 或 GraphQL 从头构建身份验证部分，并且它仍然可以在端点https://localhost:3000/api/your-file-name上使用https://localhost:3000/api/your-file-name 。 API 路由不会增加您的客户端捆绑包大小，因为它们只是服务器端捆绑包。

但是，Next.js API 路由只能在同源内访问，因为 API 路由没有指定跨域资源共享 (CORS) 标头。您仍然可以通过将 CORS 添加到 API 来调整默认行为——但这是一个额外的设置。如果您使用next export静态生成您的下一个应用程序 - 您将无法在您的应用程序中使用 API 路由。

到目前为止，我们已经了解了 API 路由何时可能是比同类解决方案更好的解决方案。现在，让我们动手并开始构建我们的 GraphQL 服务器。

跳跃后更多！继续往下看↓

配置

要使用 Next.js 启动一个新应用，我们将使用 Create Next App。也可以使用 Webpack 手动设置新应用。非常欢迎您这样做。话虽如此，打开您的命令行界面并运行以下命令：

 npx create-next-app next-graphql-server

Next.js 为 API 路由提供了一个入门模板。您可以通过执行以下命令来使用它：

 npx create-next-app --example api-routes api-routes-app

在本教程中，我们希望从头开始做所有事情，这就是为什么我们使用 Create Next App 来启动一个新应用程序，而不是使用 starter 模板。现在，按如下方式构建项目：

 ├── pages | ├── api | | ├── graphql.js | | ├── resolvers | | | └── index.js | | └── schemas | | └── index.js | └── index.js ├── package.json └── yarn.lock

正如我们之前所说， api文件夹是我们的 API 或服务器所在的位置。由于我们将使用 GraphQL，我们需要一个解析器和一个模式来创建一个 GraphQL 服务器。服务器的端点可以通过路径/api/graphql访问，该路径是 GraphQL 服务器的入口点。

通过这一步，我们现在可以为我们的服务器创建 GraphQL Schema。

创建 GraphQL 模式

快速回顾一下，GraphQL 模式定义了数据图的形状。

接下来，我们需要安装apollo-server-micro以在 Next.js 中使用 Apollo Server。

 yarn add apollo-server-micro

对于npm

 npm install apollo-server-micro

现在，让我们创建一个新的 GraphQL 模式。

在api/schemas/index.js

 import { gql } from "apollo-server-micro"; export const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { getUsers: [User] getUser(name: String!): User! }`

在这里，我们定义了一个描述 Github 用户形状的User类型。它需要一个id类型的ID 、一个login和一个 String 类型的avatar_url 。然后，我们在getUsers查询中使用必须返回用户数组的类型。接下来，我们依靠getUser查询来获取单个用户。它需要接收用户的名称才能检索它。

创建此 GraphQL Schema 后，我们现在可以更新解析器文件并创建函数来执行上述这些查询。

创建 GraphQL 解析器

GraphQL 解析器是一组函数，可让您从 GraphQL 查询生成响应。

要从 Github API 请求数据，我们需要安装axios库。因此，打开 CLI 并执行以下命令：

 yarn add axios

或者在使用npm时

npm install axios

安装库后，现在让我们在解析器文件中添加一些有意义的代码。

在api/resolvers/index.js

 import axios from "axios"; export const resolvers = { Query: { getUsers: async () => { try { const users = await axios.get("https://api.github.com/users"); return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url })); } catch (error) { throw error; } }, getUser: async (_, args) => { try { const user = await axios.get( `https://api.github.com/users/${args.name}` ); return { id: user.data.id, login: user.data.login, avatar_url: user.data.avatar_url }; } catch (error) { throw error; } } } };

正如您在此处看到的，我们将之前在 GraphQL Schema 上定义的查询名称与解析器函数相匹配。 getUsers函数使我们能够从 API 中检索所有用户，然后返回需要镜像User类型的用户数组。接下来，我们使用getUser方法在作为参数传入的名称的帮助下获取单个用户。

有了这个，我们现在有了一个 GraphQL Schema 和一个 GraphQL 解析器——是时候将它们组合起来并构建 GraphQL 服务器了。

创建 GraphQL 服务器

GraphQL 服务器将您的数据公开为 GraphQL API。它使客户应用程序能够准确地询问他们需要的数据，仅此而已。

在api/graphql.js

 import { ApolloServer } from "apollo-server-micro"; import { typeDefs } from "./schemas"; import { resolvers } from "./resolvers"; const apolloServer = new ApolloServer({ typeDefs, resolvers }); export const config = { api: { bodyParser: false } }; export default apolloServer.createHandler({ path: "/api/graphql" });

导入ApolloServer后，我们使用它创建一个新实例，然后传入 schema 和解析器来创建一个 GraphQL 服务器。接下来，我们需要告诉 Next.js 不要解析传入的请求，让 GraphQL 为我们处理。最后，我们使用apolloServer创建一个新的处理程序，这意味着路径/api/graphql将作为我们 GraphQL 服务器的入口点。

与常规的 Apollo Server 不同，Next.js 为我们处理服务器的启动，因为它依赖于服务器端渲染。这就是为什么在这里，我们不必自己启动 GraphQL 服务器。

伟大的！通过这一步，我们现在可以测试 GraphQL 服务器是否正常工作。

测试 GraphQL 服务器

浏览到项目的根目录后，在 CLI 上打开它，然后执行以下命令：

 yarn dev

或者对于npm

 npm run dev

现在，访问https://localhost:3000/api/graphql并在下面添加 GraphQL 查询以从 Github 检索所有用户。

 { getUsers { id login avatar_url } }

让我们检查一下我们是否可以使用此查询获取单个用户。

 query($name: String!){ getUser(name:$name){ login id avatar_url } }

伟大的！我们的服务器按预期工作。我们已经使用 Next.js API Routes 构建了一个 GraphQL 服务器。

结论

在本教程中，我们首先解释了 Next.js API 路由是什么，然后使用 Next.js 构建了一个 GraphQL 服务器。将后端添加到 Next.js 应用程序的能力是一个非常好的功能。它允许我们使用真正的后端扩展我们的应用程序。您甚至可以更进一步，连接数据库以使用 API 路由构建完整的 API。 Next.js 无疑使使用 API 路由构建全栈应用程序变得更加容易。

您可以在 CodeSandbox 上预览完成的项目。

谢谢阅读！