Triple Rectified

Now that our AWS backend is fully operational, we need to integrate our demo app with it.

Back in your Cloud9 terminal, change the directory to the Ionic Conference Demo project:

cd ~/environment/ionic-conference-app

Now let’s run a script that pulls down the AWS configuration we need to plug into Amplify:

./scripts/write-amplify-config

Which should yield output like:

Wrote /home/ec2-user/environment/ionic-conference-app/secrets/amplify-config.ts

CDK ultimately generates templates for AWS CloudFormation and uses it to deploy the resources into the AWS account. Along the way, our CDK application writes output metadata for our deployed stacks to CloudFormation. One of thsese outputs is the configuration JSON file we need for Amplify SDK, which identifies the particular resource IDs and ARNs for our AppSync API, S3 bucket, and Cognito User Pool. You can inspect the file using Cloud9:

GraphQL

Our AppSync API has a GraphQL schema configured from our CDK API stack deployment in the previous sections. As part of the CDK migrator application we provisioned, it automatically generated a GraphQL schema compatible with the shape of the data in Firestore. Since this is all done within AWS, we can use the AWS SDK to download the GraphQL text file directly from AppSync, which we’ll do now via a script.

Switch back to the Cloud9 terminal, and run:

./scripts/write-graphql-schema

You’ll now see that there is a schema.graphql file that was added to our project source:

Finally, we’ll run one more script that uses Amplify to generate TypeScript code for our GraphQL models that our web app consumes from the AppSync API:

./scripts/generate-graphql-helpers

You should now see the following:

What Happened?

We used Amplify to generate new TypeScript files that form all of the boilerplate GraphQL models we’ll use to interact with our AppSync API. These models are the input and outputs for GraphQL types like Query, Subscription, and Mutation common to GraphQL APIs. We’re still free to write our own GraphQL operations and types, but we now have a foundation for the common data access patterns like listing all objects, subscribing to real time changes, or getting an object by its ID.

At this stage our web app can interact with our AWS environment, and our only remaining job is to use the Amplify libraries to implement the integration between the frontend and backend.