Interactive API

Our next step is to build an API to handle trivia questions. This API will be used by the host of the game to push questions and answers to the clients. The UnicornLive dev team has settled on GraphQL to implement the API. Due to time to market being a critical business driver and its tight integration with AWS services, we’ll use a managed GraphQL service, AWS AppSync.

We will also be using the AWS Amplify library to effortlessly configure the backend. We will be using the template engine within AWS Amplify called CodeGen to quickly generate the structure of our API and our live streaming infrastructure without writing any code!

  1. Now that we have a live streaming running we now need to create an interactive API to push questions to all of our users and collect responses from the users. To get started, run the following command to create an API resource to your Amplify project:

     $ amplify api add
    
     ? Please select from one of the below mentioned services: GraphQL
     ? Provide API name: UnicornLive
     ? Choose the default authorization type for the API: Amazon Cognito User Pool
     

    We take advantage of the built in Auth component for Amplify to add basic authentication to our application. We will keep with the defaults as it supports what we need for our application.

     Do you want to use the default authentication and security configuration? Default configuration
     How do you want users to be able to sign in? Username
     Do you want to configure advanced settings? No, I am done.
     Successfully added auth resource
     
  2. Now that we have our Auth resource setup we can now setup our GraphQL schema.

     ? Do you want to configure advanced settings for the GraphQL API: No, I am done.
     ? Do you have an annotated GraphQL schema? No
     ? Do you want a guided schema creation? Yes
     ? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
     ? Do you want to edit the schema now? Yes
    
     ? Press enter to continue 
     

    This will open your default editor with a default GraphQL model:

    type Todo @model {
        id: ID!
        name: String!
        description: String
    }
    
  3. Replace the default Todo model with the following model for our question and answer API:

    type Question @model (subscriptions: {level: public}) 
    @auth (
      rules: [
        {allow:private}
      ]
    )
    {
        id: ID!
        question: String!
        answers: [String]!
        answerId: Int
    }
    
    type Answer @model @key(fields: ["owner", "gameID"])
    @auth(
      rules: [
        {allow: owner, ownerField: "owner"}
      ]
    )
    {
        owner: String!
        gameID: ID!
        answer: [Int]
    }
    
  4. Save the file you just edited using your text editor.

  5. Each one of these models will have a DynamoDB table associated with it and each will be connected to AppSync through Resolvers. Resolvers are how AWS AppSync translates GraphQL requests and fetches information from your AWS resources (in this case the DynamoDB table). Resolvers can also transform the information sent to and received from your AWS resources. We will dive deeper in a later section on this.

  6. Now run amplify push to create the backend resources.

     $ amplify push
     ? Do you want to generate code for your newly created GraphQL API? Yes
     ? Choose the code generation language target javascript
     ? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
     ? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
     ? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
     

With the Appsync hosted GraphQL API deployed, it’s time to write the client-side application code. We’ll get started by creating the Admin Panel that allows us to push questions to the audience.