首先

今天是GW圣诞日历的第6天。昨天我们实施了查询（allItem），所以今天我们将实施变异（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的实现（包括查询和变更）。您可以在这里尝试演示。此外，整体的代码在这里也有公开。

最后或最终

基本上，操作客户端API需要实现代码将返回的响应重新组合成任意数据，但使用GraphQL只需根据需要编写查询，这样实现就不会变得复杂。实际上，本来计划下一步实现subscription，以便实时反映添加的项目，但似乎渲染正在运行，每次都会执行useEffect，所以项目的添加会实时反映出来。因为明天就是最后一天，所以我决定在AppSync上寻找更多的灵感。