Originally posted at Serverless on November 19th, 2018
GraphQL gets a lot of praise for its expressiveness, for the idea of batching requests for data, and for its great development tooling. But there is an additional benefit that mostly goes unnoticed.
Namely-many frontend GraphQL frameworks make a distinction between the data in the app state and the data on a remote server. This is what allows React apps powered by GraphQL APIs to seem so fast, even if they are moving a lot of data: the moving of data happens in the background.
Users get from more responsive frontend apps, while also saving bandwidth. Developers can now model the data better, and deliver a more pleasant experience to the end user.
AppSync, AWS’s managed GraphQL layer, builds on the benefits of GraphQL and adds a few more cool things in its mobile and web SDKs: subscriptions, convenient authentication via Cognito Pools, and the ability to plug in directly to a bunch of AWS services for data.
AppSync can do a lot while still being a fully managed service, which works out great for Serverless applications. No more GraphQL resolvers in Lambda functions. No more hand-rolled authentication. It’s the best of GraphQL with less complexity than before.
In this article, we show how you can get started with AWS AppSync in a Serverless project, and talk about the benefits and drawbacks of using AppSync for your Serverless applications. Let’s get to it!
Building a chat app with AppSync
We broadly divided the process of getting a chat app running on Serverless with AWS AppSync into two parts: setting up the backend part of the service to fetch the data and deliver it via the GraphQL API, and creating a simple frontend to consume the API.
The backend
We start by defining how we will be using AppSync in our Serverless project. We are using the Serverless AppSync plugin to simplify the configuration, and all we need to provide, in addition to the authentication config, is:
A set of mapping templates that will help AppSync understand how to resolve each GraphQL you send out
A GraphQL schema that describes our API
A data source, in our case a DynamoDB database.
The AppSync section in our serverless.yml looks like this:
Our mapping templates for DynamoDB are almost an identical copy of the example from the AppSync docs, and allow us to get and create items in the Messages table. We place all mapping templates in the mapping-templates subdirectory.
For our GraphQL schema, we are starting simple, with only a few actions that are strictly necessary for a useful chat app:
A way to create a message — in this case, the createMessage mutation.
A way to get all messages — the getMessages query.
A subscription for all incoming messages, addMessage.
A description of the fields of the Message object — in this case, we want a message ID, the text of the message, the date it was posted, and the handle of the person who posted it.
With all those things our schema looks like this:
This is all we need on the backend side to get AppSync up and running. We can now deploy the service:
And then watch all resources get created.
Frontend
On the frontend, we use the GraphQL operations and the Authentication module from AWS Amplify. The core of the app is the App.js file where we configure Amplify with all our authentication settings and point it to our GraphQL endpoint.
The whole user interface, in addition to the login / sign up screens provided by Amplify, consists of two components: MessagesList and SendMessage. We use react-chat-ui for the messages list:
We then create our own Send Message box that allows us to type in it and save the contents in the component’s state:
We then use the two components in App.js. We use the Auth info that's coming from Amplify to get the username that we need to associate each sent message with. The getMessages subscription that we defined before plugs into the MessagesList component neatly, and the submit action from the SendMessage component triggers a GraphQL mutation that sends the message to the backend:
This is all for our frontend! Once we install all the dependencies we can run it via:
We land on the authentication screen provided by AppSync, where we can pick a username and a password. We can then sign in and see the list of messages, send some messages, and get responses from other users:
Originally published at https://www.serverless.com.
Top comments (0)