AWS Amplify API: GraphQL mutation

Usage in React

The mutation needs a new import.

import { createGameday, createGame } from "./../../graphql/mutations";

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>

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

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

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