Receiving Questions

  1. First we will setup the client to receive the questions and store them and then we will setup AppSync to call IVS’s Time Metadata API. To get started we are going to import some libraries and some code that was auto generated for us. Place this code at Location 10.
    import { Auth, API, graphqlOperation } from 'aws-amplify';
    import { onCreateQuestion, onUpdateQuestion } from '../../graphql/subscriptions';
    
  2. Now we will need to setup our subscriptions first. First we will setup the receiving the questions. Place this code into Location 11. In this code we are receiving the question info and storing it in our state for later, when we will need to draw the Modal. If you want to see the Modal pop up you can always add modalVisible:true to the setState call.
    API.graphql(
      graphqlOperation(onCreateQuestion),
    ).subscribe({
      next: (data) => {
        self.setState({
          drawInfo: data.value.data,
        });
      },
    });
    
  3. We will setup in the same thing for the Answers, the only difference is that instead of listening for onCreateQuestion we are going to be listening for onUpdateQuestion. Put this code at Location 12
    API.graphql(
      graphqlOperation(onUpdateQuestion),
    ).subscribe({
      next: (data) => {
        self.setState({
          drawInfo: data.value.data,
          modalVisible: true,
        });
      },
    });
    
  4. Now we have our subscriptions all set up! We will now receive questions and answers from our Admin page to our client. But we still don’t see the Modal popup! We are going to draw the Modal when IVS’s Time Metadata tells us to. So first we need to make AppSync call IVS’s Time Metadata. To get started we are going to need to create a new IAM policy to allow Lambda to call our IVS API.