AWS Amplify教程之四：添加API功能

教程

发布日期: 2021-08-04

前面对AWS Amplify进行一个基本的介绍，以及如何为React APP添加用户验证和使用S3存储的功能，下面介绍如何在Amplify中使用AWS API功能。

AWS Amplify

AWS Amplify系列教程：

增加GraphQL API服务

首先运行命令：

bash

amplify add api

进行如下设置：

AWS Amplify教程

最后一步询问是否编辑schema，其实就是amplify/backend/api/amplifydemo/schema.graphql这个文件。

之后运行以下命令在AWS中创建相应资源：

bash

amplify push

在此过程中Amplify会询问是否需要创建相应的query,mutation,subscription等功能，这里都可以选择默认值。之后只要schema做了更改，这些操作函数都会被自动生成。

关于GraphQL的教程，请参考这里。

都创建完毕后可以查看所有用到的服务：

bash

amplify console

React代码

这里只以添加todo为例。首先添加src/components/ApiDemo.js:

javascript

import React from 'react';
import { API, graphqlOperation} from 'aws-amplify';
import { createTodo } from '../graphql/mutations';
import { listTodos } from '../graphql/queries';

export default function ApiDemo() {

    async function addTodo() {
        try {
            const todo = {
                id: 1,
                name: 'todo demo - name',
                description: 'todo demo - desc'
            }
          await API.graphql(graphqlOperation(createTodo, {input: todo}))
        } catch (err) {
          console.log('error creating todo:', err)
        }
    }

    const list = async () => {
        const res = await API.graphql(graphqlOperation(listTodos));
        res.data.listTodos.items.map((todo) => {
            console.log(todo.id, todo.name, todo.description);
        })
    }

    return (
        <div>
            <button onClick={addTodo}>Add</button>
            <button onClick={list}>List</button>
        </div>
    )
}