构建客户端应用程序 - Amazon AppSync
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅 中国的 Amazon Web Services 服务入门 (PDF)

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

构建客户端应用程序

要开始Amazon AppSync在 JavaScript 或 Flow 应用程序中使用,请先将 GraphQL 架构添加到您的项目中。

注意

在构建应用程序之前,您需要安装和配置 npmAmazon CLI

要开始使用,请执行以下操作:

  1. 你需要下载你的架构。

    使用 CLI

    从您的项目目录中,使用 Amazon CLI 下载您的架构:

    aws appsync get-introspection-schema --api-id <api-id> --format SDL schema.graphql --region <region>

    使用控制台

    转到您的 API 的架构页面。点击下拉按钮,选择导出架构,然后选择schema.graphql。将文件保存到您的项目目录中。

  2. 接下来,使用Amazon Amplify工具链为您的 API 生成代码生成。在项目目录中,运行命令并在需要时按照提示添加 amplify:

    npx amplify add codegen --apiId <api-id>

    这将生成 GraphQL 文档(查询、变更和订阅),并为您的 JavaScript 或 Flow 应用程序生成类型。如果您修改生成的文档或 API 的架构,则可以随时使用以下方法重新生成客户端代码:

    npx amplify codegen
  3. 最后,创建名为的 API 配置文件aws-exports.js并将其放在项目的源目录中。用你的 API 值替换这些值。你可以在 API 的设置页面上找到这些值:

    const awsmobile = { "aws_appsync_graphqlEndpoint": "<API URL>", "aws_appsync_region": "<REGION>", "aws_appsync_authenticationType": "API_KEY", "aws_appsync_apiKey": "<API KEY>", }; export default awsmobile;
  4. 现在,您可以更新应用程序以利用您的Amazon AppSync GraphQL API。在你的项目中安装这个aws-amplify库以利用它的 API GraphQL 模块:

    npm install @aws-amplify/api
  5. 导入Amazon Amplify和代码文件中的 API 模块,以及代码生成器生成的任何所需操作。例如,在项目源代码中添加以下代码,确保<variables>替换为特定于代码的变量:

    // top of file import { API } from '@aws-amplify/api' import config from './aws-exports' import { listSomething } from './graphql/queries' // after your imports API.configure(config) // later down in your code async function list() { const response = await API.graphql({ query: listSomething, variables: { // <your variables, optional> }, }) console.log(response) } list()