loading...
Cover image for AWS Amplify API: GraphQL queries

AWS Amplify API: GraphQL queries

johanneskonings profile image Johannes Konings ・2 min read

Disclaimer ⚠

I'm not expert in AWS Amplify neither in GraphQL, but I'd like to describe how I solved the requirement of a little badminton webapp for tracking the results in our badminton team.

AWS Amplify

For an overview of AWS Amplify the brand new docs are very helpfull: https://docs.amplify.aws/

In my case this part https://docs.amplify.aws/cli/graphql-transformer/overview was important and also this blog:

Data model

This data model I tried to implement with a AWS Amplify GraphQL API.

data model

(drawn with https://dbdiagram.io/)

Which look like this i the graphql.schema

type Gameday @model {
  id: ID!
  date: AWSDate!
  games: [Game] @connection(name: "GamedayGames")
}
type Game @model {
  id: ID!
  gameday: Gameday @connection(name: "GamedayGames")
  player1: Player @connection(name: "GamePlayer")
  player2: Player @connection(name: "GamePlayer")
  resultPlayer1: Int!
  resultPlayer2: Int!
}
type Player @model {
  id: ID!
  name: String
  game: Game @connection(name: "GamePlayer")
}

Usage in React

To start with a nice React app I used a this template from Creative Tim https://www.creative-tim.com/product/material-dashboard-react

I copied /src/views/TableList/TableList.js to /src/views/Games/Games.js and started to adapt the implementation to my needs.

Imports:


import React, { useState, useEffect } from "react";
import Amplify, { API, graphqlOperation } from "aws-amplify";
import awsconfig from "./../../aws-exports";
import { listGamedays, listGames} from "./../../graphql/queries";

The AWS Amplify configuration:


Amplify.configure(awsconfig);

This states have to be defined:


  const [gameDayItems, setGameDayItems] = useState([]);
  const [selectedGameDay, setSelectedGameDay] = useState([]);

By calling up the Webbapp, the all Gamedays are displayed:


  useEffect(() => {
    onPageRendered();
  }, []);

  const onPageRendered = async () => {
    readGameDays();
  };

  const readGameDays = async () => {
  const allGameDays = await API.graphql(graphqlOperation(listGamedays));

  const allGameDayItems = allGameDays.data.listGamedays.items;

    const tableArray = allGameDayItems.map(item => {
      return [item.id, item.date];
    });

    tableArray.sort(function(a, b) {
      return a.id - b.id;
    });

    setGameDayItems(tableArray);
  };

games on Rendering

Filtered queries

The games are displayed depending on the gameday. To do this, the gameday must be selected.

The gameday table has property which handle the row click

          <CardBody>
            <Table
              tableHeaderColor="primary"
              tableHead={["Id", "Date"]}
              tableData={gameDayItems}
              selectedRow={handleGameDaySelection}
            />
          </CardBody>

This function call the GraphQL query for the games

  const handleGameDaySelection = (event, key) => {
    let selectedGameDayFromState = gameDayItems[key][0];
    readGames(selectedGameDayFromState);
    setSelectedGameDay(gameDayItems[key]);
  };

The query selecte all games which begins with the gameday id.

  const readGames = async gameDayId => {
    const allGames = await API.graphql(
      graphqlOperation(listGames, {
        filter: { id: { beginsWith: gameDayId } }
      })
    );

    const allGamesItems = allGames.data.listGames.items;

    const tableArray = allGamesItems.map(item => {
      return [
        item.id,
        item.player1.name,
        item.player2.name,
        item.resultPlayer1.toString(),
        item.resultPlayer2.toString()
      ];
    });

    setGameItems(tableArray);
  };

Coding

GitHub logo JohannesKonings / fff-badminton

An AWS Amplify Webapp for tracking badminton games based on the Creative Tim Template Material Dashboard React

Discussion

markdown guide