AWS Amplify API: GraphQL queries
Tags: awsamplify, appsync, graphql
Published: 2020-03-29 16:48:38

# 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:
{% link https://dev.to/joemsak/barebones-aws-amplify-react-graphql-app-5ae8 %} 

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

![data model](https://raw.githubusercontent.com/JohannesKonings/fff-badminton/master/src/assets/img/fff-data-model.png)

(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:

```javascript

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:

```javascript

Amplify.configure(awsconfig);

```

This states have to be defined:

```javascript

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

```

By calling up the Webbapp, the all Gamedays are displayed:

```javascript

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

```

![games on Rendering](https://dev-to-uploads.s3.amazonaws.com/i/3n74ldea4fuwny5lpm1n.png)

# 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

```javascript
          <CardBody>
            <Table
              tableHeaderColor="primary"
              tableHead={["Id", "Date"]}
              tableData={gameDayItems}
              selectedRow={handleGameDaySelection}
            />
          </CardBody>
```
This function call the GraphQL query for the games

```javascript
  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.

```javascript
  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
{% github JohannesKonings/fff-badminton %}