AWS Amplify StudioのDataStoreで条件を絞ってデータを取得する方法

概要

最近、AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発の書籍を購入してAmpify Studioの勉強してたらDataStoreを使用した問い合わせ方法が書籍の書いてある方法だとうまくいきませんでした。
Amplify デベロッパー センターのドキュメントを読んで解決したのですが、どこかに残しておきたいなぁと、、

せっかくなので、Qiitaを使う側になってみようと思ったので執筆しました。

やりたいこと

以下のようなModelに対してname情報を指定してデータ取得をしたい。

Model名: Board

Field name	Type
id	ID!
message	String!
name	String
image	String
PersonID	Relationship Source

※ 最終的に以下の様にinputのイベントから取得できる様にします。

やりたいことを実現したコード

function App() {
  const [content1, setContent1] = useState("")
  const [input, setInput] = useState("")
  const [find, setFind] = useState(input)

  useEffect (() => {
    const doChange = (e) => {
      setInput(e.target.value)
    }
    const doFilter = (e) => {
      setFind(input)
    }

    DataStore.query(Board, c => c.name.contains(find)).then(values => {
      const data = []
      for (let item of values) {
        data.push(
          <BoardComponent board={item} key={item.id} />
        )
      }
      setContent1(
        <div>
          <div className='mx-0 my-3 row'>
            <input type='text' className='form-control col' onChange={doChange} />
            <button className='btn btn-primary col-2' onClick={doFilter}>Click</button>
          </div>
          {data}
        </div>
      )
    })
  }, [input, find])
  return (
    略
  )
}

export default withAuthenticator(App)

書籍との違いについて

書籍との違いは大きく2つあります。

• DataStore.queryの引数の取り方
  • 書籍の方だとDataStore.query(Board, ob=>ob.name("contains", find)).then(values=>{...略...}と記載されていましたが、これだとデータが取得できません。
  • 私は最近Amplifyを使い始めたのでひょっとしたらこの書籍が執筆された当初はこれで上手くいっていた？
• doChange関数とdoFilter関数を記述する位置
  • useEffectの外にこれらの関数を記述するとESLintが[input, find]の箇所でWarningをあげてきます。
  • 特に問題があるWarningではないので、// eslint-disable-next-line no-unused-varsなどをWarningが出ている箇所の上の行に差し込んでもいいと思います。

参照

掌田津耶乃 . AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発 . 2022年8月31日 , 初版 , p.211-215 .
Amplifyデベロッパーセンター(データストア > データの操作), （参照 2023-02-12）.