前言
随着云计算的发展，越来越多的企业开始使用 Serverless 架构来构建其应用程序，而 GraphQL 作为一种新兴的 API 架构风格，也在逐渐流行，并且被越来越多的企业采用。
Amplify 是一个完全托管的服务，专门用于构建移动和 Web 应用程序的后端服务。而 Next.js 是一个高度可定制的 React 框架，具有 SSR（服务器端渲染）功能。这两个工具非常适合用于构建 Serverless 的 GraphQL API。
本文将详细介绍如何使用 Next.js 和 Amplify 集成，实现一个 Serverless 的 GraphQL API。
准备工作
在开始使用 Next.js 和 Amplify 集成的过程之前，我们需要做一些准备工作：
安装 Node.js ：在开始前需要先下载 Node.js 安装包，从官网上选择合适的版本进行安装。
安装 Amplify ：在命令行终端输入
npm install -g @aws-amplify/cli命令进行安装。
创建 Next.js 应用程序
在进行 Next.js 和 Amplify 集成之前，我们需要先创建一个 Next.js 应用程序。
- 在命令行终端中输入以下命令来创建一个新的 Next.js 应用程序：
npm init next-app my-app
- 运行以下命令来进入到
my-app目录并启动应用程序：
cd my-app npm run dev
在浏览器中打开 http://localhost:3000 来访问应用程序。
集成 Amplify
现在我们已经有了 Next.js 应用程序，让我们开始集成 Amplify。
- 在命令行终端中运行以下命令来初始化 Amplify：
amplify init
在初始化过程中，Amplify 会提示您输入一些配置选项，如存储的名称和区域、API 的名称等等。根据自己的需求进行配置。
- 运行以下命令来添加一个新的 API：
amplify add api
在此过程中，您将被提示选择一个 API 类型。选择 GraphQL API。
- 配置 AWS AppSync GraphQL API：
在此步骤中，Amplify 将使用 AppSync 部署 GraphQL API。
在上一步选择了 GraphQL API 后，需要设置相关的配置：
- 设置 API 名称和唯一身份标识符（ID）。
- 选择一个身份验证类型（仅限于 Amazon Cognito 标准身份验证或自定义身份验证）并设置相关的配置信息。
- 运行以下命令来推送应用程序更改：
amplify push
现在您已经将 Next.js 应用程序和 Amplify 集成在一起，可以开始构建 Serverless 的 GraphQL API。
使用 Amplify 和 Next.js 构建 Serverless GraphQL API
在进行下一步之前，首先需要安装以下依赖包：
npm install --save aws-amplify @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations apollo-cache-inmemory apollo-client apollo-link-http graphql graphql-tag isomorphic-unfetch
然后，我们需要在应用程序中添加 aws-exports.js 文件和 pages/api/graphql.ts 文件。
添加 aws-exports.js 文件
添加 aws-exports.js 文件的目的是为了让应用程序与 Amplify 连接。该文件位于 /src/aws-exports.js，具体内容如下：
const awsmobile = {
"aws_appsync_graphqlEndpoint": "xxx",
"aws_appsync_region": "xxx",
"aws_appsync_authenticationType": "xxx"
};
export default awsmobile;上述代码中的 aws_appsync_graphqlEndpoint、aws_appsync_region 和 aws_appsync_authenticationType 属性分别对应上述 Amiplify 项目中的 GraphQL API 配置信息。
添加 pages/api/graphql.ts 文件
pages/api/graphql.ts 文件的目的是为了在 Next.js 中创建 GraphQL API。该文件包括 Serverless API 的全部逻辑。
-- -------------------- ---- -------
------ - ------------- --- - ---- ----------------------
------ ---------------------
------ - ------- - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- -------------------
------ --------- ---- --------------
------ - --------------- - ---- -------------
----- - ------------------- - - ------------
----- -------- - ----
---- ----- -
- --- ---- ------ ------- -------
------ -------
-
---- -------- -
- --- ---- ------ --------- -------
-
- --- ---- ------ ----- -------
--
----- --------- - -
------ -
------ -- -- ------ --------
-- --- ---- ------ ------- -------
--
--------- -
-- --- ---- ------ --------- -------
--
-- --- ---- ------ --------- -------
--
----- ------ - --- --------------
---------
----------
-------- ----- -- --- -- - ---- --------------- -- -- -
-- --- ----- --- -------- ---- ----------- ---------
----- --- - -------------------------------------------------
----- ----- - --------------------------
----- ---- - --- ---------
----
------- -------------------------------
----- -
----- ----------------------------
--------- ------
--
-------------------------- ------ ----- -- --- ----
----- ----- - --- ----------------
------ -
-----
------
--
--
---
------ ------- ---------------------- ----- -------------- ---当完整复制后，将以上代码拷贝到 pages/api/graphql.ts 文件内，并保存。
运行应用程序
现在，我们已经在应用程序中创建了 Serverless GraphQL API。在完成了上述所有步骤后，我们可以在本地浏览器中运行以下命令来启动应用程序：
npm run dev
然后，在浏览器中输入 http://localhost:3000/api/graphql，会发现 API 应该已经能够运行成功了。
总结
到此，我们已经成功地实现了一个 Serverless 的 GraphQL API。
从本文的介绍中，我们可以看出使用 Amplify 和 Next.js 一起开发 Serverless 的 GraphQL API 是非常容易的。通过本文您可以学习到如何使用这些工具来创建您自己的 GraphQL API 并将其部署到 AWS 上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a693d48841e989488c258