Serverless Vue.js with GraphQL
UPDATE: The provided Vue boilerplate is now using Prisma and Auth0!
The serverless architecture is gaining more and more followers as new frameworks and services appear in the market. The most common monolith architecture was replaced by micro-services in many projects, which improved scalability but raised complexity. Recently, the latter gave way to the so-called serverless architecture.
Rather than deploying a whole server, now it is possible to worry only about custom code that runs at specific timing during the application. For instance, whenever a new user is registered in the DB, there will be a hook or event where a “send verification email” function can be called. All the backend code is split in functions (sometimes called cloud functions or lambda functions) that are managed and scaled automatically by third-party services.
This “new” tech has some huge advantages such as reducing cost or making traditional dev-ops almost unnecessary. However, it brings some drawbacks that not everybody is willing to face yet. As mentioned by Dmitri Zimine in his article “Serverless is cheaper, not simpler”, there is still a lot of wiring among serverless functions that increases complexity. That said, it is just a matter of time that new commercial services and best practices come up to fight back this complexity.
Apart from that, GraphQL has shown that it is here to stay and many big companies such as GitHub itself are switching their APIs from REST. GraphQL is a very expressive query language that can be sent directly from the client side. Instead of using different API endpoints to get chunks of data — from what we might only need a few lines — , GraphQL tools (e.g. Apollo) will send back the exact data that was specifically asked for in the query. It doesn’t necessarily replace REST but it is surely a technology you’d want to evaluate when starting a new project.
In this article, we will have a brief overview on existing serverless GraphQL solutions and how they can be combined with Vue.js to kick-start new projects.
Vue.js boilerplate
If you have read any of my previous articles you can already guess I love Vue.js (I lovue?). Recently, I found a very opinionated enterprise boilerplate made by Chris Fritz — who, by the way, recently launched a Patreon campaign — and thought it was pure gold. Check it out if you are a Vue developer and don’t know it yet.
I’ve made another repo starting from Chris’ project in order to add my own opinionated code such as components inside folders and some file distribution changes, including also template generators and docs. It can load components in plain files like my-menu.vue or inside their own directories like my-menu/index.vue without changing the import statement: import MyMenu from ‘@components/my-menu'. If you like that idea, you might want to have a look at it here. Again, props to Chris and the other contributors for this awesome project.
This version also includes GraphQL features such as query template generators and a way to easily organize and import queries. These changes are located in the appsync branch. Sneak peek here:
As you can see, queries and mutations can be imported just like an ES module (thanks to graphql-tag/loader).
It is still a work in progress and eventually I’d like to add better examples and use other cloud services. And also resolve some existential questions such as “To Vuex or not to Vuex” — there is already another state management solution for remote data provided by Apollo which can handle local state thanks to apollo-link-state. Check this introduction article by Peggy Rayzis for more information.
Serverless GraphQL solutions
As aforementioned, there are more and more commercial products — some of them open source! — that are coming up to deal with the serverless complexity.
Graphcool
The Graphcool project has been around for a while. It provides open source tools to easily create a managed backend that can be deployed using a CLI.
We just need to write a minimum GraphQL schema and Graphcool will create CRUD operations for us. It provides a set of hooks where we can call Lambda functions or webhooks whenever a mutation or query is performed. It can be deployed to the Graphcool cloud for a fully managed backend development.
Prisma
The Graphcool guys are recently focusing more on this product, Prisma, and just a few days ago they released an interesting cloud solution. Prisma will eventually become the core of the previous Graphcool project as well but, for now, it implements features that the other one doesn’t. Prisma is not a real serverless solution itself — it is just a layer that adds GraphQL to our DB — unless it is deployed by something like the Serverless Framework.
Therefore, it provides high flexibility that may be suitable for more projects. I̶ ̶h̶a̶v̶e̶n̶’̶t̶ ̶p̶l̶a̶y̶e̶d̶ ̶t̶o̶o̶ ̶m̶u̶c̶h̶ ̶w̶i̶t̶h̶ ̶i̶t̶ ̶m̶y̶s̶e̶l̶f̶ ̶y̶e̶t̶ ̶b̶u̶t̶ it certainly looks promising. And the best feature, it is also open source!
If you are interested in this, you can check this template which provides Vue integration with Prisma.
AWS AppSync
Amazon didn’t want to be late to the party and released a preview version of their own managed GraphQL solution last year: AWS AppSync. This product became publicly available very recently so there are still not many examples or articles about it.
Just like Graphcool and Prisma, AppSync also takes a schema and creates CRUD operations and subscriptions for us. Amazon, however, takes a slightly different approach here and uses its own client library rather than relying on other community tools (although it still uses Apollo internally). Thanks to that, they provide seamless integration with other AWS products like Cognito, DynamoDB or Lambda functions. If you are one of those AWS lovers this is great news for you, but it might be a drawback for some developers who prefer a different stack.
Since AppSync is quite new, let’s show here how we can easily add it to our Vue app.
Adding AWS AppSync to the stack
The Vue template provided here already includes AppSync and an example that uses it. However, it is easy to remove AppSync code and add plain apollo-client while still reusing all the structure and features included in the template. You just need to replace src/apollo.js file with your own setup. Also, beware that, since the queries and mutations are automatically generated by AppSync, your new service might use different naming conventions (e.g. getNotes instead of listNotes ).
To get started with AppSync you need an AWS account. Select AWS AppSync in the available products and you’ll be able to create a new API in just 1 click. Download the AppSync.json file provided in the main page of your newly created API and put it under src/AppSync.json after cloning the Vue template.
After that, change to the “Schema” section and add something like this:
type Note {
id: ID!
title: String!
description: String
}type Query {
fetchNote(id: ID!): Note
}schema {
query: Query
}
This just created a very simple type Note and a query for it. Save this and click on “Create Resources”. This step will automatically spawn more queries, mutations and subscriptions for our schema and add DynamoDB tables for it. After creating them, you just need to modify the new schema and connect the new mutations and subscriptions:
schema {
query: Query
mutation: Mutation
subscription: Subscription
}Optionally, fetchNote query can be removed since AppSync generates a getNote query that does the same. Remember pressing “Save” again after these modifications.
That should be all the steps needed to get started with Vue + AppSync. If you correctly replaced the AppSync.json file in your project, you should be able to run yarn && yarn dev and play with it. All the queries are located in src/gql/note.gql , which you can also copy and use in AppSync online playground (under the “Queries” section). In case you want to add new queries, just run yarn new gql and input the name and location.
Extra resources:
- Video: AWS AppSync — Creating a Serverless GraphQL Backend
- Article: Full Stack Vue with GraphQL & AWS AppSync
Conclusion
Serverless and GraphQL are relatively new technologies that are progressively taking over. It doesn’t mean they are the right choices for everybody but it’s certainly worth it having a look at them before starting new projects.
I think this might be particularly useful for mobile apps with a rather simple backend that mostly relies on database mutations and real time subscriptions. It can reduce costs for the backend and reduce the bandwidth required by the application, apart from providing a presumably faster development.
Huge corporations like Facebook or Amazon are betting already on it. It is still a challenging field but, as it gets more attention, its complexity should be reduced.
I hope you found something of this useful. Thanks for reading and happy coding!
