DEV Community

Johannes Konings
Johannes Konings

Posted on • Edited on

3 2

AWS Amplify API: GraphQL mutation

Usage in React

The mutation needs a new import.

import { createGameday, createGame } from "./../../graphql/mutations";
Enter fullscreen mode Exit fullscreen mode

The section gameday contains a button for the gameday creation with a data field.

<GridItem xs={12} sm={12} md={12}>
        <Card>
          <CardHeader color="primary">
            <GridContainer justify="flex-start">
              <GridItem xs={12} sm={12} md={12}>
                <h4 className={classes.cardTitleWhite}>Gamedays</h4>
                <p className={classes.cardCategoryWhite}>
                  Whenever wherever games happend
                </p>
              </GridItem>
            </GridContainer>
            <GridContainer justify="flex-end">
              <GridItem xs={12} sm={12} md={12}>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                  <KeyboardDatePicker
                    disableToolbar
                    variant="inline"
                    format="dd.MM.yyyy"
                    margin="normal"
                    id="date-picker-inline"
                    label="Date"
                    value={selectedDate}
                    onChange={handleDateChange}
                    KeyboardButtonProps={{
                      "aria-label": "change date"
                    }}
                  />
                </MuiPickersUtilsProvider>

                <Button onClick={onClickCreateGameDay} color="primary">
                  Create a Gameday
                </Button>
              </GridItem>
            </GridContainer>
          </CardHeader>
          <CardBody>
            <Table
              tableHeaderColor="primary"
              tableHead={["Id", "Date"]}
              tableData={gameDayItems}
              selectedRow={handleGameDaySelection}
            />
          </CardBody>
        </Card>
      </GridItem>
Enter fullscreen mode Exit fullscreen mode

gameday creation

The button call this function, which create the gameday.


  function onClickCreateGameDay() {
    addGameDay();
  }

  const addGameDay = async () => {
    const d = selectedDate;
    const gameDayDateString = [
      d.getFullYear(),
      "-",
      ("0" + (d.getMonth() + 1)).slice(-2),
      "-",
      ("0" + d.getDate()).slice(-2)
    ].join("");

    await API.graphql(
      graphqlOperation(createGameday, {
        input: { id: gameDayDateString, date: gameDayDateString }
      })
    );
  };

Enter fullscreen mode Exit fullscreen mode

For the creation of the games we need the relation to the gameday and the players.

game creation

  function onClickCreateGame() {
    const player1 = playerItems.find(player => player.id === selectedPlayer1);
    const player2 = playerItems.find(player => player.id === selectedPlayer2);
    const gameDayId = selectedGameDay[1];
    const gameId = [gameDayId] + "#" + selectedPlayer1 + "#" + selectedPlayer2;

    addGame(
      gameDayId,
      gameId,
      player1.id,
      player2.id,
      resultPlayer1,
      resultPlayer2
    );
  }

  const addGame = async (
    gameDayId,
    gameId,
    player1Id,
    player2Id,
    resultPlayer1,
    resultPlayer2
  ) => {
    await API.graphql(
      graphqlOperation(createGame, {
        input: {
          id: gameId,
          gameGamedayId: gameDayId,
          gamePlayer1Id: player1Id,
          gamePlayer2Id: player2Id,
          resultPlayer1: resultPlayer1,
          resultPlayer2: resultPlayer2
        }
      })
    );
  };
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more