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.
(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);
};
Coding
JohannesKonings / fff-badminton
An AWS Amplify Webapp for tracking badminton games based on the Creative Tim Template Material Dashboard React
fff-badminton
Template
Documentation
The documentation for the Material Dashboard React is hosted at our website.
Technical description of the webapp
https://dev.to/johanneskonings/series/5661
development
https://aws.amazon.com/de/amplify/
data model
local dev
amplify mock
test
npx cypress open
npm run cypress:open
semantic release
GITHUB_TOKEN=<<GitHub token>> npx semantic-release --dry-run
Top comments (1)
Hello mate, thanks for sharing! Do you use React Query with this?