首先。.)

今天是GW圣诞日历的第五天。昨天我们进行了事前准备，所以今天我们将继续实现GraphQL。这次我们将执行allItem查询来获取数据。
另外，关于GraphQL服务器，由于Cognito认证实现比较复杂，所以我们暂时回到了第二天的内容（因为目标是发出GraphQL查询）。

安装必要的软件包。

安装Amplify的软件包。

yarn add aws-amplify-react aws-amplify

为了在这次使用Fooks(useState())时发出查询，我们将安装一个名为availity的Fooks包，它可以轻松处理异步处理。

yarn add @availity/api-axios @availity/api-core @availity/hooks

实施

虽然没有展示内容，但使用useState()来查询allItem的处理过程就像这样。

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

const App = () => {
  const [item, setItem] = useState([{
    id: '',
    data: '',
  }])
  useEffectAsync(async () => {
    const result = await API.graphql(graphqlOperation(allItem))
    setItem(result.data.allItem)
  })
  return (
    <ul>
      {item.map(i =>
        <li>
          {i.data}
        </li>
      )}
    </ul>
  )
}

export default App

因为上次的codegen生成了一个名为./graphql的文件夹以及用于query和mutation的自动生成文件, 所以我们将使用它。

返回的API.graphql()结果似乎以嵌套在名为data的字段内的常规查询结果形式返回。

最后

使用Amplify和AppSync，可以在一行代码中实现数据的获取。由于没有进行后端逻辑的实现，因此可以快速创建应用程序的优势是这种组合的优点。这次就到这里，明天我们将开始实现mutation。再见！