【React】Amplify オブジェクトデータを取得しMaterial UIのテーブルを使ったリスト表示

React

Amplifyで作成したDBからオブジェクト要素を取り出して、その中の更に必要な要素のみを取り出して、テーブルデザインでリスト表示する方法をまとめました。

import Amplify from 'aws-amplify';
import awsconfig from "../aws-exports.js";

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';

import  { API } from 'aws-amplify';
import * as queries from '../graphql/queries.js';

import React, { useState, useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid';

Amplify.configure(awsconfig);

const DrinkList = () => {

  const [drinkList, setDrinkList] = useState([]);

  async function getDrinkList(){
    const resDrinks = await API.graphql({ 
        query: queries.listDrinks,
        authMode: 'AMAZON_COGNITO_USER_POOLS'
    });

    const listDrink = resDrinks.data.listDrinks.items;
    setDrinkList(listDrink)
  }

  useEffect(() => {
    getDrinkList()
  },[])
  
  const columns = [
    { field: 'name', headerName: 'Name', width: 100 },
    { field: 'price', headerName: 'Price', width: 100 },
  ]

  return (
    <>
      <h2>ドリンク一覧</h2>
      
      <div style={{ height: 400, width: '100%' }}>
        <DataGrid
          columns={columns}
          rows={drinkList}
          pageSize={5}
          rowsPerPageOptions={[5]}
          checkboxSelection
        />
      </div>
    </>
  )
}

export default withAuthenticator(DrinkList);

↑これをもう少し詳しく解説していきます!

Amplifyの導入

以下3行を記述

import Amplify from 'aws-amplify';
import awsconfig from "../aws-exports.js";

Amplify.configure(awsconfig);

SignOut機能をページに表示する

関係する部分のみ抽出すると、、、

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';

   省略

const DrinkList = () => (
  <div>
    <AmplifySignOut />
  </div>
);

   省略

export default withAuthenticator(DrinkList);

公式ページは以下

https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components

Amplifyデータを取得

  • drinkList初期値[]として設定
  • graphqlでlistDrinksからデータを取得
  • 取得したデータの中のitemsを抽出
  • 更新関数setDrinkListにそれを入れる
  • useEffect内にgetDrinkListを入れることで、初回レンダリング時のみ実行されるようにする

これにより、getDrinkListの実行で、drinkListには、オブジェクトin配列の形でデータを取り出せた。

import  { API } from 'aws-amplify';
import * as queries from '../graphql/queries.js';

import React, { useState, useEffect } from 'react';

Amplify.configure(awsconfig);

const DrinkList = () => {

  const [drinkList, setDrinkList] = useState([]);

  async function getDrinkList(){
    const resDrinks = await API.graphql({ 
        query: queries.listDrinks,
        authMode: 'AMAZON_COGNITO_USER_POOLS'
    });

    const listDrink = resDrinks.data.listDrinks.items;
    setDrinkList(listDrink)
  }

  useEffect(() => {
    getDrinkList()
  },[])

Tableを作成

こちらのMaterial UIを使用

React Table component - MUI
Tables display sets of data. They can be fully customized.

  const columns = [
    { field: 'name', headerName: 'Name', width: 100 },
    { field: 'price', headerName: 'Price', width: 100 },
  ]

  return (
    <>
      <h2>ドリンク一覧</h2>
      
      <div style={{ height: 400, width: '100%' }}>
        <DataGrid
          columns={columns}
          rows={drinkList}
          pageSize={5}
          rowsPerPageOptions={[5]}
          checkboxSelection
        />
      </div>
    </>
  )
}

以上!

コメント

タイトルとURLをコピーしました