はじめに
今日は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を実装していきます。ではまた！