アプリケーションデータの作成、更新、削除

このガイドでは、Amplify ライブラリの GraphQL クライアントを使用してデータを作成、更新、削除する方法を学習します。

開始する前に、以下が必要です:

API に接続されたアプリケーション

ミューテーションを実行してアプリケーションデータを作成、更新、削除する

GraphQL では、ミューテーションはデータを作成、更新、または削除するために使用される API です。これはデータを読み取るが変更しないために使用されるクエリとは異なります。以下の例は、Amplify GraphQL クライアントを使用してアイテムを作成、更新、削除する方法を示しています。

アイテムを作成する

API とミューテーションをインポートしてからアイテムを追加できます:

import { API } from 'aws-amplify';
import * as mutations from './graphql/mutations';
import { GraphQLQuery } from '@aws-amplify/api';
import { CreateTodoInput, CreateTodoMutation } from './API';
const todoDetails: CreateTodoInput = {
  name: 'Todo 1',
  description: 'Learn AWS AppSync'
const newTodo = await API.graphql<GraphQLQuery<CreateTodoMutation>>({
  query: mutations.createTodo,
  variables: { input: todoDetails }

作成されたアイテム Learn AWS AppSync が表示されます。

import { API } from 'aws-amplify';
import * as mutations from './graphql/mutations';
const todoDetails = {
  name: 'Todo 1',
  description: 'Learn AWS AppSync'
const newTodo = await API.graphql({
  query: mutations.createTodo,
  variables: { input: todoDetails }

作成されたアイテム Learn AWS AppSync が表示されます。

注: createdAt フィールドを指定する必要はありません。Amplify は自動的にこのフィールドに値を入力します。

アイテムを更新する

アイテムを更新するには、GraphQL 更新ミューテーションを使用します:

import { API } from 'aws-amplify';
import * as mutations from './graphql/mutations';
import { GraphQLQuery } from '@aws-amplify/api';
import { UpdateTodoInput, UpdateTodoMutation } from './API';
const todoDetails: UpdateTodoInput = {
  id: 'some_id',
  description: 'Updated description'
const updatedTodo = await API.graphql<GraphQLQuery<UpdateTodoMutation>>({
  query: mutations.updateTodo,
  variables: { input: todoDetails }

import { API } from 'aws-amplify';
import * as mutations from './graphql/mutations';
const todoDetails = {
  id: 'some_id',
  //  _version: 'current_version', // add the "_version" field if your AppSync API has conflict detection (required for DataStore) enabled
  description: 'Updated description'
const updatedTodo = await API.graphql({
  query: mutations.updateTodo,
  variables: { input: todoDetails }

注:

updatedAt フィールドを指定する必要はありません。Amplify は自動的にこのフィールドに値を入力します。
API で予想されていない 追加の 入力フィールドを指定する場合、このクエリは失敗します。これはクエリによって返される error フィールドで確認できます。GraphQL では、エラーは他の言語の例外のようにスローされません。代わりに、すべてのエラーはキャプチャされ、クエリ結果の error フィールドの一部として返されます。

アイテムを削除する

削除ミューテーションを使用して Todo を削除できます。削除するアイテムを指定するには、そのアイテムの id を指定するだけで済みます:

import { API } from 'aws-amplify';
import * as mutations from './graphql/mutations';
import { GraphQLQuery } from '@aws-amplify/api';
import { DeleteTodoInput, DeleteTodoMutation } from './API';
const todoDetails: DeleteTodoInput = {
  id: 'some_id'
const deletedTodo = await API.graphql<GraphQLQuery<DeleteTodoMutation>>({
  query: mutations.deleteTodo,
  variables: { input: todoDetails }

import { API } from 'aws-amplify';
import * as mutations from './graphql/mutations';
const todoDetails = {
  id: 'some_id'
const deletedTodo = await API.graphql({
  query: mutations.deleteTodo,
  variables: { input: todoDetails }

注: 関連するレコードを削除する前に、結合テーブルレコードを削除する必要があります。たとえば、Post と Tags 間の多対多の関係の場合、Post または Tag を削除する前に PostTags 結合レコードを削除してください。

詳しく学ぶ

データをミューテーションするためのカスタム認可モード

各 AWS AppSync API は、アプリを設定するときにデフォルトの認可モードを使用します。不正なエラーが発生した場合は、認可モードを更新する必要があります。このデフォルトをオーバーライドするには、authMode プロパティを渡します。以下の例は、カスタム認可モードでデータをミューテーションする方法を示しています:

import { API } from 'aws-amplify';
import { GraphQLQuery, GRAPHQL_AUTH_MODE } from '@aws-amplify/api';
import * as mutations from './graphql/mutations';
import { CreateTodoInput, CreateTodoMutation } from './API';
const todoDetails: CreateTodoInput = {
  id: 'some_id',
  name: 'My todo!',
  description: 'Hello world!'
const todo = await API.graphql<GraphQLQuery<CreateTodoMutation>>({
  query: mutations.createTodo,
  variables: { input: todoDetails },
  authMode: GRAPHQL_AUTH_MODE.AWS_IAM

import { API } from 'aws-amplify';
import { GRAPHQL_AUTH_MODE } from '@aws-amplify/api';
import * as mutations from './graphql/mutations';
const todoDetails = {
  id: 'some_id',
  name: 'My todo!',
  description: 'Hello world!'
const todo = await API.graphql({
  query: mutations.createTodo,
  variables: { input: todoDetails },
  authMode: GRAPHQL_AUTH_MODE.AWS_IAM

ミューテーションリクエストをキャンセルする

API.graphql(...) によって返される GraphQL リクエストプロミスで .cancel を呼び出すことで、任意の GraphQL API リクエストをキャンセルできます。

const promise = API.graphql({ query: "..." });
  await promise;
} catch (error) {
  console.log(error);
  // If the error is because the request was cancelled you can confirm here.
  if (API.isCancel(error)) {
    console.log(error.message); // "my message for cancellation"
    // handle user cancellation logic
// To cancel the above request
API.cancel(promise, "my message for cancellation");

API.graphql() から返されたプロミスが変更されていないことを確認する必要があります。通常、async 関数は返されるプロミスを別のプロミスにラップします。たとえば、以下は 機能しません:

async function makeAPICall() {
  return API.graphql({ query: '...' });
const promise = makeAPICall();
// The following will NOT cancel the request.
API.cancel(promise, 'my error message');

まとめ

おめでとうございます! アプリケーションデータの作成、更新、削除 ガイドが完了しました。このガイドでは、GraphQL API を通じてアプリデータを作成、更新、削除しました。

次のステップ

推奨される次のステップには、API を使用してデータをクエリし、リアルタイムイベントをサブスクライブして、データの変更を監視することが含まれます。このタスクに役立つリソースは以下のとおりです: