[AWS Amplify] Create & Interact with an AWS AppSync GraphQL API with AWS Amplify
2023-09-14 08:59:12 时间
In this lesson we’ll create a new GraphQL API using the Amplify CLI and use the Amplify GraphQL API to query data from the new API & render it in our app. We’ll also look at how to perform mutations from the client
Add GraphQL:
amplify add api
Edit schema:
// schema.graphql type Toto @model { id: ID! name: String! description: String completed: Boolean }
Run:
amplify push
Install:
yarn add aws-amplify aws-amplify-react
app.js:
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import { withAuthenticator } from 'aws-amplify-react' import { API, graphqlOperation } from 'aws-amplify' const ListTodos = ` query { listTodos { items { id name description completed } } } ` class App extends Component { state = { todos: [] } async componentDidMount () { const todoDate = await API.graphql(graphqlOperation(ListTodos)) this.setState({ todos: todoData.data.listTodos.items }) } render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> { this.state.todos.map((todo, i)) => ( <div> <h3>{todo.name}</h3> <p>{todo.description}</p> </div> )) } </div> ); } }
相关文章
- [工作随笔]Python 和AWS CDK的aws-route53那些事
- AWS 2022 re:Invent 观察 | 天下武功,唯快不破
- AWS re:Invent:SRD协议将取代TCP?
- MySQL Error number: MY-011425; Symbol: ER_KEYRING_AWS_FAILED_TO_ACCESS_DATA_FILE; SQLSTATE: HY000 报错 故障修复 远程处理
- MySQL Error number: MY-011426; Symbol: ER_KEYRING_AWS_CMK_ID_NOT_SET; SQLSTATE: HY000 报错 故障修复 远程处理
- MySQL Error number: MY-011438; Symbol: ER_KEYRING_AWS_FAILED_TO_GENERATE_NEW_KEY; SQLSTATE: HY000 报错 故障修复 远程处理
- AWS IAM 基本概念介绍
- 亚马逊AWS S3故障4小时,波及 Adobe、Slack 等数千家线上服务
- AWS 将提供 8TB 或 16TB 内存的新型实例
- Twitter宣布牵手AWS交付其时间表,首次尝试使用公有云扩展实时服务
- 在AWS上快速安装MySQL数据库(aws安装mysql)
- 快速部署MySQL借助AWS服务实现轻松搞定(aws服务安装mysql)
- AWS改变MySQL配置,创建更加美好的未来(aws改mysql配置)
- 使用AWS同步构建MySQL数据库环境(aws同步mysql)
- 控制利用AWS建立MySQL用户控制权限(aws mysql 用户)
- 域跨越地域的赋能利用AWSMysql实现多区域云数据库部署(aws mysql 多区)
- AWS MySQL备份确保数据安全(aws mysql 备份)
- AWS实现无缝迁移至Oracle(aws去oracle)
- 如何增加Oracle数据库的AMP值(amp值oracle)
- 探索Oracle云和AWS的全新世界(oracle云和aws)
- 亚马逊云服务CEO劝合作伙伴:别想着一脚踏两船,专心和我们合作就好 | AWS re:Invent 大会