In this post I want to discuss one option for authorizing users to do "stuff" in a React web app built using AWS Amplify. We've walked through the process for creating React web apps that leverage AWS Amplify in other posts so I am going to assume if you are reading this you are familiar with the process.
In this post we are going to rewrite the Function we created in part 1 but in this post our API will use AWS Cognito for authentication (as opposed to an api key). Our scenario is the same as part 1 and we will use the same GraphQL client (graphql-request).
In a previous post I discussed calling a REST API from Lambda. In that post we were calling out to an external API to gather data. In this post I want to follow those same patterns but call a GraphQL API. For this post to make sense you should review the previous post.
In this post we will create a very simple (and not practical) Todo API using AWS AppSync with an AWS Lambda Data Source. This example is meant to outline the steps involved in the process and in no way creates a useful API.
In a recent project a few different streams of work converged. I thought it might be worth capturing some of the things I learned in a post.
I have previously used the Apollo Client. A lot of my work with it predates the release of React Apollo 2.1 where the Query and Mutation components were introduced. At the same time, I have been embracing render props whenever and wherever I can. It has become my preferred integration pattern whenever an option exists. So, it made sense to circle back on using the Query and Mutation components (they leverage render props) when the opportunity arose.
I recently started work on a project that uses AWS AppSync (AWS's GraphQL service). AWS AppSync provides a GraphQL client that is an extended (or enhanced) version of the Apollo Client. I believe the AppSync client exists to provide a more seamless AppSync experience but it also includes some extra bits such as offline capabilities.
The timing was perfect to not only learn about AppSync but to re-visit the Apollo Client and update my knowledge there too. Whenever I learn something new I tend start with a very simple project that I can later build on to do something more meaningful. That's exactly what I did in this case.
In this post we will create a very contrived ToDo App in React leveraging AWS Amplify and AWS AppSync. This post assumes a basic understanding of AWS Amplify (link to the docs below). You can get away without knowing very much about AWS AppSync, but the end result may not mean very much to you.