DEV Community

Cover image for AWS Amplify API: GraphQL queries
Johannes Konings
Johannes Konings

Posted on

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:

In my case this part 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

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

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


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:


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(() => {
  }, []);

  const onPageRendered = async () => {

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

  const allGameDayItems =;

    const tableArray = => {
      return [,];

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


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

              tableHead={["Id", "Date"]}

This function call the GraphQL query for the games

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

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 =;

    const tableArray = => {
      return [,,,



GitHub logo JohannesKonings / fff-badminton

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

Top comments (1)

jdnichollsc profile image
J.D Nicholls

Hello mate, thanks for sharing! Do you use React Query with this?