Create account

DEV Community

Johannes Konings

Posted on Mar 29, 2020

AWS Amplify API: GraphQL queries

#awsamplify #appsync #graphql

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:

Barebones AWS Amplify + React + GraphQL App

Joe Sak ・ Nov 17 '19 ・ 4 min read

#react #aws #graphql #javascript

Data model

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

(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);
  };

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