はじめに

今日はGWアドベントカレンダーの６日目です。昨日はquery（allItem）を実装したので今日はmatation（addItem）を実装してアイテムの追加ボタンをつくります。

実装

といってもクソ簡単です。addItemはクエリ変数が必要となるので、昨日のAPI.graphql()を以下のように拡張させます。

await API.graphql(graphqlOperation(addItem, { item: { data: 'hogehoge' } }))

単純に横にオブジェクトを追加するだけです。クエリ変数の書き方ですが、最初に書いたスキーマ↓より、

input ItemInput {
    data: String!
}

type Mutation {
    addItem(item: ItemInput!): Item
}

addItemはitemというItemInput型の引数を必要としています。なのでフィールド名をitemに合わせます。その中の値をItemInputに合わせたいのでdataというフィールドを持つオブジェクトの値にします。
最終的に全体のコードはこんな感じになりました。

import React, { useState } from 'react'
import { useEffectAsync } from '@availity/hooks'
import { API, graphqlOperation } from 'aws-amplify'
import { allItem } from './graphql/queries'
import { addItem } from './graphql/mutations'

const App = () => {
  const [item, setItem] = useState([{
    id: '',
    data: '',
  }])
  const [inputItem, setInputItem] = useState({
    data: '',
  })
  useEffectAsync(async () => {
    const result = await API.graphql(graphqlOperation(allItem))
    setItem(result.data.allItem)
  })

  return (
    <div>
      <input value={inputItem.data} onChange={(e) => setInputItem({ data: e.target.value})} />
      <button onClick={
        async () => await API.graphql(graphqlOperation(addItem, { item: inputItem }))
      }>
        add
      </button>
      <ul>
        {item.map(i =>
          <li>
            {i.data}
          </li>
        )}
      </ul>
    </div>
  )
}

export default App

雑な実装ですが、hooksの範囲だけで簡単にAPIの実装（queryとmutation）ができました。こちらでデモを試すことができます。また、全体のコードはこちらで公開しています。

さいごに

基本的にクライアントからのAPIの操作にはレスポンスから任意のデータに組み替える実装が必要になりますが、GraphQLを用いると必要に応じてクエリを書くだけでいいので実装が複雑にならないのがいいですね。
本当は次にsubscriptionを実装して追加したアイテムをリアルタイムに反映させるようにしようと思っていたのですが、それをせずともレンダリングが走っているのか、毎回useEffectが実行されてアイテムの追加がリアルタイムで反映されているみたいですね。。。
明日が最後なのでなんかAppSyncでもう少しネタがあるか探すことにします。

AppSyncをクライアントで動かす（mutation編）

はじめに

実装

さいごに