Выполните следующие действия, чтобы создать API AWS AppSync, который подключается к клиентскому приложению React с помощью нового интерфейса командной строки AWS Amplify.
С выпуском нового AWS Amplify CLI разработчики теперь имеют возможность формировать AWS AppSync GraphQL API из командной строки.
В этом посте мы узнаем, как использовать интерфейс командной строки для создания API AWS AppSync, а также как подключить новый API к клиентскому веб-приложению или мобильному приложению.
Интерфейс командной строки может автоматически создавать полнофункциональный API GraphQL, включая источники данных, преобразователи и дополнительную схему для мутаций, подписок и запросов. Мы также можем обновлять и удалять схему, источники данных и преобразователи в нашем API прямо из нашей локальной среды.
Усилить преобразование GraphQL
У нас также есть возможность добавлять мощные функции, такие как Elasticsearch, авторизация пользователей и отношения данных, используя библиотеку Amplify GraphQL Transform непосредственно из интерфейса командной строки в нашей локальной среде.
Amplify GraphQL Transform - это библиотека для упрощения процесса разработки, развертывания и поддержки API GraphQL. С его помощью вы определяете свой API с помощью языка определения схемы GraphQL (SDL), а затем передаете его в библиотеку, где он преобразуется и реализует модель данных вашего API в AWS AppSync.
Хотя библиотека поставляется с преобразователями для выполнения большей части работы, необходимой для создания типичного API, вы также можете написать свой собственный преобразователь GraphQL.
Например, если мы хотим создать платформу GraphQL API, которая создает источник данных, преобразователи, схему, а затем передает все данные в Elasticsearch, мы могли бы создать следующий тип и подтолкнуть его с помощью интерфейса командной строки AWS Amplify:
type Pet @model @searchable {
id: ID!
name: String!
description: String
}
В приведенной выше схеме аннотации @model & @searchable автоматически создадут для нас источники данных и все ресурсы.
Также имеется аннотация @connection, которая позволяет вам определять отношения между @model типами объектов, и аннотация @auth, которая позволяет вам указывать схемы авторизации в вашем GraphQL API.
Давайте посмотрим, как создать новый API AWS Appsync с помощью Amplify CLI с библиотекой Amplify GraphQL Transform и подключить его к клиентскому приложению React.
1. Установите и настройте интерфейс командной строки.
Сначала мы установим интерфейс командной строки AWS Amplify:
npm i -g @aws-amplify/cli
После установки интерфейса командной строки AWS Amplify нам теперь нужно настроить его с помощью пользователя IAM:
amplify configure
Чтобы просмотреть видео-пошаговое руководство по настройке интерфейса командной строки AWS Amplify, щелкните здесь.
2. Подключите API к клиентскому приложению.
Затем мы создадим новое приложение React и перейдем в новый каталог:
npx create-react-app blog-app cd blog-app
Теперь нам нужно установить клиентские библиотеки AWS Amplify:
yarn add aws-amplify aws-amplify-react # or npm install --save aws-amplify aws-amplify-react
3. Инициализируйте проект AWS Amplify.
Из корневого каталога или только что созданного приложения React давайте инициализируем новый проект AWS Amplify:
amplify init
Когда вас спросят, хотите ли вы использовать профиль AWS, выберите Да, используя профиль, который мы создали при настройке проекта ранее.
После инициализации проекта мы добавим функцию GraphQL API в наш проект Amplify:
amplify add api
Это проведет нас через следующие шаги по созданию API AWS AppSync GraphQL:
- Выберите одну из следующих служб: GraphQL
- Укажите название API: blogapp
- Выберите тип авторизации для API: API_KEY
- У вас есть аннотированная схема GraphQL ?: N
- Вам нужно управляемое создание схемы? Г
- Что лучше всего описывает ваш проект: Отношения «один-ко-многим» (например, «Блоги» с «сообщениями» и «комментариями»)
- Вы хотите изменить схему сейчас? Г
Это откроет предварительно заполненную схему в выбранном вами редакторе, а также предоставит вам локальный путь к файлу новой схемы, которая была создана.
Давайте посмотрим на схему. Мы также сделаем небольшое обновление, добавив поле content к типу Post. После обновления схемы сохраните файл:
type Blog @model { id: ID! name: String! posts: [Post] @connection(name: "BlogPosts") } type Post @model { id: ID! title: String! content: String! blog: Blog @connection(name: "BlogPosts") comments: [Comment] @connection(name: "PostComments") } type Comment @model { id: ID! content: String post: Post @connection(name: "PostComments") }
В приведенной выше схеме мы видим, что типы Post и Blog имеют аннотацию @model . Типы объектов, помеченные @model , являются объектами верхнего уровня в сгенерированном API. При нажатии они будут создавать таблицы DynamoDB, а также дополнительные схемы и преобразователи, чтобы связать все вместе.
Чтобы узнать больше об аннотации @model, нажмите здесь.
Мы также видим аннотацию @connection, используемую в типах. Аннотации @connection позволяют указывать отношения между @model типами объектов. В настоящее время @connection поддерживает отношения «один к одному», «один ко многим» и «многие к одному». При попытке настроить отношение «многие ко многим» возникает ошибка.
Чтобы узнать больше о типе
@connection, нажмите здесь.
Теперь, когда схема готова к работе, мы можем отправить все, чтобы выполнить создание ресурсов:
amplify push
После создания ресурсов мы готовы создать приложение и начать взаимодействие с API.
Теперь мы также можем просмотреть API на панели инструментов AWS AppSync, щелкнув новое имя API.
На панели инструментов AWS AppSync мы также можем начать выполнение запросов и изменений, нажав Запросы в левом меню:
Давайте попробуем создать новый блог с сообщениями и комментариями, а затем запросить данные блога.
На панели управления AWS AppSync нажмите Запросы.
Сначала мы создадим новый блог:
mutation createBlog {
createBlog(input: {
name: "My Programming Blog"
}) {
id
name
}
}
Затем мы создадим новый пост в этом блоге (заменим postBlogId идентификатором, полученным в результате приведенной выше мутации):
mutation createPost {
createPost(input: {
title: "Hello World from my programming blog"
content: "Welcome to my blog!"
postBlogId: "bcb298e6-62ec-4614-9ab7-773fd811948e"
}) {
id
title
}
}
Теперь давайте создадим комментарий для этого сообщения (замените commentPostId идентификатором, полученным в результате вышеуказанной мутации):
mutation createComment {
createComment(input: {
content: "This post is terrible"
commentPostId: "ce335dce-2c91-4fed-a953-9ca132f129cf"
}) {
id
}
}
Наконец, мы можем запросить блог, чтобы увидеть все статьи и комментарии (замените ID на id вашего блога):
query getBlog {
getBlog(id: "bcb298e6-62ec-4614-9ab7-773fd811948e") {
name
posts {
items {
comments {
items {
content
}
}
title
id
content
blog {
name
}
}
}
}
}
4. Подключитесь к API из React.
Чтобы подключиться к новому API, нам сначала нужно настроить наш проект React с нашими учетными данными проекта Amplify. Вы заметите новый файл с именем aws-exports.js, расположенный в каталоге src. Этот файл содержит всю информацию, которую наш локальный проект должен знать о наших облачных ресурсах.
Чтобы настроить проект, откройте src/index.js и добавьте следующее под последним импортом:
import Amplify from '@aws-amplify/core' import config from './aws-exports' Amplify.configure(config)
Теперь мы можем приступить к выполнению мутаций, запросов и поисков по API.
Определения мутаций GraphQL, которые мы будем выполнять, будут выглядеть так:
// Create a new blog
const CreateBlog = `mutation($name: String!) {
createBlog(input: {
name: $name
}) {
id
}
}`
// Create a post and associate it with the blog via the "postBlogId" input field
const CreatePost = `mutation($blogId:ID!, $title: String!, $content: String!) {
createPost(input:{
title: $title, postBlogId: $blogId, content: $content
}) {
id
}
}`
// Create a comment and associate it with the post via the "commentPostId" input field
const CommentOnPost = `mutation($commentPostId: ID!, $content: String) {
createComment(input:{
commentPostId: $commentPostId, content: $content
}) {
id
}
}`
Определение запроса GraphQL, который мы будем выполнять, будет выглядеть так:
// Get a blog, its posts, and its posts comments
const GetBlog = `query($blogId:ID!) {
getBlog(id:$blogId) {
id
name
posts {
items {
id
title
content
comments {
items {
id
content
}
}
}
}
}
}`
5. Настройте клиентское приложение.
Первое, что нужно сделать, это настроить Amplify с вашим веб-приложением. В корне вашего приложения (в React это будет src/index.js) под последним импортом добавьте следующий код:
import Amplify from 'aws-amplify' import config from './aws-exports' Amplify.configure(config)
Теперь мы можем начать выполнение операций через API.
6. Выполните мутации от клиента
Создание нового блога:
// import the API & graphqlOperation helpers as well as the mutation
import { API, graphqlOperation } from 'aws-amplify'
import { CreateBlog } from './your-graphql-definition-location'
// next, we create a function to interact with the API
state = { blogName: '' }
createBlog = async () => {
const blog = { name: this.state.blogName }
await API.graphql(graphqlOperation(CreateBlog, blog))
console.log('blog successfully created')
}
Создание поста для блога:
// import the API & graphqlOperation helpers as well as the mutation
import { API, graphqlOperation } from 'aws-amplify'
import { CreatePost } from './your-graphql-definition-location'
// next, we create a function to interact with the API
state = { postTitle: '' , postContent: '' }
createBlog = async () => {
const post = {
title: this.state.postTitle,
content: this.state.postContent,
postBlogId: this.props.blogId // Or where your blogId data lives
}
await API.graphql(graphqlOperation(CreatePost, post))
console.log('post successfully created')
}
Комментируя пост:
// import the API & graphqlOperation helpers as well as the mutation
import { API, graphqlOperation } from 'aws-amplify'
import { CommentOnPost } from './your-graphql-definition-location'
// next, we create a function to interact with the API
state = { content: '' }
createBlog = async () => {
const comment = {
content: this.state.content,
commentPostId: this.props.commentPostId // Or where your commentPostId data lives
}
await API.graphql(graphqlOperation(CommentOnPost, comment))
console.log('comment successfully created')
}
7. Выполните запросы от клиента.
Листинг блога с сообщениями и комментариями:
// import the API & graphqlOperation helpers as well as the query
import { API, graphqlOperation } from 'aws-amplify'
import { GetBlog } from './your-graphql-definition-location'
// next, we create a function to interact with the API
getBlog = async () => {
const data = await API.graphql(graphqlOperation(GetBlog, { id: this.props.blogId }))
console.log('blog successfully fetched', data)
}
8. Измените s chema.
Если в любой момент вы захотите изменить схему, чтобы добавить, обновить или удалить что-либо, вы можете открыть файл, в котором расположена схема, внести изменения, а затем запустить amplify push, чтобы обновить API AWS AppSync.
Видео прохождение
В этом видео-пошаговом руководстве мы создаем API AWS AppSync GraphQL с помощью интерфейса командной строки Amplify и подключаем его к приложению React.
Если вы хотите узнать больше о создании API GraphQL с помощью AWS AppSync, следите за Адрианом Холлом и прочтите его сообщение Создайте сервис GraphQL простым способом с помощью AWS Amplify Model Transforms.
Чтобы узнать больше об AWS Amplify, ознакомьтесь с документацией или Github.
Меня зовут Надер Дабит. Я адвокат разработчиков в AWS Mobile, работаю с такими проектами, как AWS AppSync и AWS Amplify, автор React Native in Action и редактор React Native Training и OpenGraphQL.
