【React】Amplifyのオブジェクトデータを取得し、MUIのテーブルでリスト表示

2021.12.02

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

コードがこちら

import Amplify　from 'aws-amplify';
import awsconfig from "../aws-exports.js";
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の導入

Amplifyを使用するために、以下3行を記述します。

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

Amplify.configure(awsconfig);

Amplifyの公式ページはこちらです。

Introduction - React - AWS Amplify Gen 1 Documentation
Getting started with Amplify AWS Amplify Documentation
docs.amplify.aws

Amplifyのデータを取得

データを取得するための手順がこちらです。

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

これにより、getDrinkListの実行で、drinkListには、配列にオブジェクトが入った形でデータを取り出すことができます。

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のData tableを使ってリスト表示します。

React Table component - Material UI
Tables display sets of data. They can be fully customized.
mui.com
 

  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>
    </>
  )
}

コンポーネント名はData tableなのに、タグ名はDataGridなので紛らわしいですね。

以上、ご覧いただきありがとうございました。

コメント