Amplify+GraphQL+DynamoDBでのデータソート

はじめに

React(typescript)でAWSのAmplifyとGraphQLを用いてDynamoDBにあるデータをソート(今回は作成日順に)して一覧表示する時に詰まったのでメモ程度に残しておきます。どうやらElasticSeacrhなるものがあるらしい。誰かの役にたちますように。

Amplify公式リファレンス

スキーマにsearchableを追加

schema.graphql

type Message @model
@searchable #←これを追加
{
  id: ID!
  username: String!
  content: String!
  updatedAt: AWSDateTime
  createdAt: AWSDateTime!
}

編集を保存したら

$amplify push

で編集内容をpushしましょう。
ElasticSearchが生成されます。
それでは、queriesを確認してみましょう。

queries.ts

#--略---
export const searchMessages = /* GraphQL */ `
  query SearchMessages(
    $filter: SearchableMessageFilterInput
    $sort: SearchableMessageSortInput
    $limit: Int
    $nextToken: String
  ) {
    searchMessages(
      filter: $filter
      sort: $sort
      limit: $limit
      nextToken: $nextToken
    ) {
      items {
        id
        username
        content
        updatedAt
        createdAt
      }
      nextToken
      total
    }
  }
`;

先ほどのpushが反映されて、新しくsearchMessagesが作成されていますね！

あとは好きなところでqueryを叩きましょう。今回はApp.tsx内で書いています

App.tsx

import React,{useEffect,useState} from 'react';
import { API, graphqlOperation } from "aws-amplify";
import { searchMessages} from './graphql/queries';



const App:React.FC=()=> {

const querySort = Object.assign({},{
    sort : { 
        field: 'createdAt',//作成日指定
        direction: 'asc'//早い順
    },
    limit : 100 //デフォルトだと10個までしかとれない
  })

useEffect(() => {
  (async ()=> {
    try {
      let results = await API.graphql(graphqlOperation(searchMessages,querySort));
      console.log(results);//ここで内容を出力

   } catch (e) {
      console.log(e)//エラー処理
    }
 })();
},[]);

...
}
return(
 <>
 ...
 </>
)

コンソールでobjectを確認すると、データが作成日によって並び替えられています！
大分色々省きましたが、参考になったら嬉しいです

参考記事

Amplify公式リファレンス