Storing Users Answers

We can’t receive any answers from our users yet, so we need to setup receiving answers from our users. Before we can receive answers we need to register the user for the game.

  1. Navigate to src/components/Game/index.jsx in your code editor.

  2. Import another mutation. Place this code in Location 15

    import { createAnswer } from '../../graphql/mutations';
    
  3. Now we are going to need to get our username from the our Auth provider so we can send it with our query. The reason why we are not using the userid, is that if we want to draw a leaderboard or call someone out it will be more readily available as you can’t query Cognito for that info. We are going to placing the code to do this at Location 16

    Auth.currentSession()
      .then((data) => {
        API.graphql(
          graphqlOperation(createAnswer, { input: { gameID: '1', owner: data.idToken.payload['cognito:username'] } }),
        ).then(((res) => {
          console.log(res);
        })).catch((err) => {
          console.log('err: ', err);
      });
    });
    
  4. Now that we have registered our user into the game we now need to start recording their answers to the questions. Navigate to src/components/Modal/index.jsx

  5. Place this code in Location 17 to import the required libraries and generated code.

    import { API, graphqlOperation } from 'aws-amplify';
    import { updateAnswer } from '../../graphql/mutations';
    
  6. Now we just use another GraphQL query to record the users answer. Place this code in Location 18.

    API.graphql(
      graphqlOperation(
        updateAnswer,
        {
          input: {
            id,
            answer: [index],
          },
        },
      ),
    ).then((res) => {
      console.log('successfully submitted answer: ', res);
    }).catch((err) => {
      console.log('err: ', err);
    });
    
  7. Now we are recording their answers. Almost. You will notice that we are only storing the index everytime and not merging the existing array with the new array. So we will need to do this in the backend of AppSync. We are going to do this by modifying another resolver.

  8. Open the AppSync Console and navigate to your AppSync endpoint.

  9. Once you select your AppSync endpoint on the left side select Schema. Appsync Schema

  10. You now should see your schema that was auto generated for you from Amplify. On the right side you should see a section called Resolvers. Search for Mutation in the text box and then select the clickable link next to updateAnswer(...):Answer Appsync Resolver

  11. You are now presented with a Request Mapping Template and a Response Mapping Template.

    1. We are going to change the Request Mapping Templateto do the appending of the array.
    2. Navigate/search for #set( $expression = "SET" ) and look for this line (should be near line 182):
      #set( $expression = "$expression $entry.key = $entry.value" )
      
    3. Replace this line with:
      #if ($util.matches($entry.key, "#answer"))
          #set( $expression = "$expression $entry.key = list_append(if_not_exists($entry.key, :empty_list), $entry.value)" )
          $util.qr($expValues.put(":empty_list", $util.dynamodb.toDynamoDB([])))
      #else
          #set( $expression = "$expression $entry.key = $entry.value" )
      #end
      

      This checks to see if the field being set is the answer array. If it is the array then it will append the value. We also do a check to see if the field exists and if it doesn’t we create an empty array to append our first value to.

    4. Save the resolver in the top right corner.

Now when you push questions from the admin view, you should see them populate the page on the viewer/home page and you should be able to submit questions and interact with the audience.