Amplify Libraries API(GraphQL)/Getting Started

Getting Started

• graphql apiを作成する

amplify add api

• amplify/backend/api/myapi/schema.graphqlを開いてスキーマ定義

amplify push

• @modelデコレータをつけるとmutation, query, subscription, DynamoDBのテーブルなどを自動生成してくれる。
• デプロイしたサービスを表示する

amplify console

• アプリケーションを構成する

yarn add aws-amplify

• アプリのエントリポイントでamplifyの構成ファイルをインポートして認証情報などをとってくる。

import { Amplify, API, graphqlOperation } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

• crudの実装
• mutation

import { API, graphqlOperation } from 'aws-amplify';
import { createTodo, updateTodo, deleteTodo } from './graphql/mutations';
import { GraphQLQuery } from '@aws-amplify/api';
import { CreateTodoInput, CreateTodoMutation, UpdateTodoMutation, DeleteTodoMutation } from './API';

const todo: CreateTodoInput = { name: "My first todo", description: "Hello world!" };

/* create a todo */
await API.graphql<GraphQLQuery<CreateTodoMutation>>(graphqlOperation(createTodo, {input: todo}));

/* update a todo */
await API.graphql<GraphQLQuery<UpdateTodoMutation>>(graphqlOperation(updateTodo, { input: { id: todoId, name: "Updated todo info" }}));

/* delete a todo */
await API.graphql<GraphQLQuery<DeleteTodoMutation>>(graphqlOperation(deleteTodo, { input: { id: todoId }}));

• query

import { API, graphqlOperation } from 'aws-amplify';
import { GraphQLQuery } from '@aws-amplify/api';
import { listTodos } from './graphql/queries';
import { ListTodosQuery } from './API';

const todos = await API.graphql<GraphQLQuery<ListTodosQuery>>(graphqlOperation(listTodos));

• subscription

import { API, graphqlOperation } from 'aws-amplify';
import { GraphQLSubscription } from '@aws-amplify/api';
import { onCreateTodo } from './graphql/subscriptions';
import { OnCreateTodoSubscription } from './API';

// Subscribe to creation of Todo
const sub = API.graphql<GraphQLSubscription<OnCreateTodoSubscription>>(
    graphqlOperation(onCreateTodo)
).subscribe({
    next: (payload) => {
      const createdTodo = payload.value.data?.onCreateTodo;
      console.log(createdTodo);
    }
});

// Stop receiving data updates from the subscription
sub.unsubscribe();

• schemaを変更したらamplify pushコマンドを実行してgraphqlバックエンドを更新する
• Graphql Transformersの使用
  • スキーマで@modelなどのディレクティブを用いることでdynamoDBテーブルにオブジェクトを保存し、これに対してcrudオペレーションを設定することができる。
• directives

Directive	Description
@model	DynamoDBに保存し、CRUDリゾルバーを設定する
@auth	apiの認証戦略を定義
@hasOne, @hasMany, @belongsTo, @manyToMany	@modelオブジェクトのリレーションを特定
@searchable	Amazon OpenSearchにデータをストリームする
@primaryKey and @index	データをキーでインデックス化。
@predictions	machine learningサービスに連携。
@http	API内でHTTPリゾルバを設定する。

• graphqlスキーマからクライアントで型生成

amplify codegen