DEV Community

Posted on Mar 29, 2020

AWS Amplify API: GraphQL queries

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

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