JavaScript：AWS Amplify（客户端）

graphql-github-io-zh-Hans生态项目与库

JavaScript：AWS Amplify（客户端）

简介

AWS Amplify 是一套用于构建云端应用的 JavaScript 库，提供声明式编程接口，帮助开发者快速在 Web 或移动应用中接入云服务。在 GraphQL 方面，它深度集成 AWS AppSync，提供开箱即用的 GraphQL 后端支持，同时附带 React 组件，便于直接在 UI 中读取或操作 GraphQL 数据。

该项目由亚马逊维护，源仓库位于 GitHub，npm 包名为 aws-amplify。

核心特性

GraphQL 后端支持：通过 AWS AppSync 快速创建和管理 GraphQL API，自动生成类型、查询、变更和订阅相关代码。
React 组件集成：提供如 <Connect> 等高阶组件或 hooks，帮助在 React 应用中方便地查询和订阅 GraphQL 数据。
完整云服务能力：除 GraphQL 外，还涵盖认证（Auth）、存储（Storage）、分析（Analytics）、推送通知（Push Notifications）等常用云功能，便于统一管理。
多平台兼容：官方支持主流前端框架，也可在 React Native 等环境中使用。

基本使用

安装

使用 npm 或 yarn 安装：

bash 复制代码

npm install aws-amplify
# 或
yarn add aws-amplify

初始化

在应用入口文件中引入并配置 Amplify：

js 复制代码

import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

aws-exports.js 文件可由 Amplify CLI 自动生成，包含 API 端点、API KEY 等配置信息。

GraphQL 查询示例

js 复制代码

import { API, graphqlOperation } from 'aws-amplify';

const listTodos = /* GraphQL */ `
  query ListTodos {
    listTodos {
      items {
        id
        name
        description
      }
    }
  }
`;

async function fetchTodos() {
  try {
    const todoData = await API.graphql(graphqlOperation(listTodos));
    console.log(todoData.data.listTodos.items);
  } catch (error) {
    console.error('Error fetching todos', error);
  }
}

React 组件中使用

jsx 复制代码

import React, { useEffect, useState } from 'react';
import { API, graphqlOperation } from 'aws-amplify';

function Todos() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetchTodos();
  }, []);

  async function fetchTodos() {
    const result = await API.graphql(graphqlOperation(listTodos));
    setTodos(result.data.listTodos.items);
  }

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.name}</li>
      ))}
    </ul>
  );
}

官方资源

官网文档：https://docs.amplify.aws/
GitHub 仓库：https://github.com/aws-amplify/amplify-js
npm 包：https://www.npmjs.com/package/aws-amplify

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。