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: 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")
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

The AWS Amplify configuration:


Amplify.configure(awsconfig);

Enter fullscreen mode Exit fullscreen mode

This states have to be defined:


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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

This function call the GraphQL query for the games

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

Enter fullscreen mode Exit fullscreen mode

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);
  };
Enter fullscreen mode Exit fullscreen mode

Coding

GitHub logo JohannesKonings / fff-badminton

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

fff-badminton

license GitHub issues GitHub closed issues Known Vulnerabilities test Total alerts Language grade: JavaScript semantic-release

Template

Join the chat at https://gitter.im/NIT-dgp/General Chat

Material Dashboard React Tweet

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

data model

local dev

amplify mock
Enter fullscreen mode Exit fullscreen mode

test

npx cypress open
npm run cypress:open
Enter fullscreen mode Exit fullscreen mode

semantic release

GITHUB_TOKEN=<<GitHub token>> npx semantic-release --dry-run




Top comments (1)

Collapse
 
jdnichollsc profile image
J.D Nicholls

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