Tuesday, 26 March, 2019 UTC

Building an image processing app with GraphQL and async serverless

Building an image processing app with GraphQL and async serverless

Summary

Here's how I used GraphQL Subscriptions to build an image processing app that uploads an image to the cloud and converts it to sepia asynchronously

TL;DR
  • Hasura gives instant GraphQL APIs over Postgres
  • Image processing is best done asynchronously so that the state is not lost when the app is refreshed
  • Serverless functions can be used to run the image processing logic
  • Realtime GraphQL helps you be in sync with the processing state
Introduction
In this post we'll build a basic image processing app that lets you upload an image and add a sepia tone to it asynchronously. We will not go into the code subtleties as this is more of a philosophical rant about how async image processing apps can be built using realtime GraphQL and serverless.  
We'll use:
  • Hasura GraphQL Engine as a free realtime GraphQL server over Postgres.
Hasura gives you realtime GraphQL APIs over any Postgres database
  • An event sourcing system to trigger external webhooks on mutations
Prerequisites
  • Knowledge of consuming a GraphQL API
  • Knowledge of some front-end framework. An example is given with ReactJS, but you could use anything.
Architecture
This app follows the 3factor.app architecture pattern. 3factor app is an architecture pattern for resilient and scalabale fullstack apps. It involves:
  • Realtime GraphQL
  • Reliable Eventing
  • Async serverless
Older architecture vs 3factor architecture
In case of our image processing app, the flow of the application would be:
  1. The client uploads the image to cloud and inserts the image URL into the database with a GraphQL mutation. The client then watches the changes in the database for that particular image with GraphQL subscriptions.
  2. When the image URL has been inserted in the database, Hasura's event system calls an external webhook with the image details
  3. The external webhook converts the image to sepia tone, uploads the converted image to cloud and updates the database with the converted image URL
  4. The client receives the update when the converted image has been uploaded to the database (GraphQL subscriptions)
Backend
First step is to get a realtime GraphQL server running in the form of Hasura GraphQL Engine.
Click here to deploy it to Heroku's free tier with free Postgres (no credit card required).

Data model

We need only one table for this app.
The above function simply takes an object of the following form, converts it to sepia and stores the converted image at /tmp/<id>.png.
{
	"id": 233,
	"image_uri": "https://mycloudbucket.com/image"
}
Once the image has been converted, you also want to update the converted image URI to the database.
As you see, in the above component:
  1. If there is an error in subscription, we render some error UI.
  2. If the subscription is in loading state, we show a loading UI.
  3. If the subscription response is empty i.e. there is no row in the database where id is equal to the given id, we say that the id in the URL parameters is invalid.
  4. If we get a response but the converted_image_uri is null, we assume that the processing is still in progress
  5. If we have a valid converted_image_uri, we render it.
Finishing up
We discussed a pattern to build async image processing applications. You could use this architecture to build mostly all kinds of async applications. Check out 3factor.app and hasura.io to know more about building resilient and scalable fullstack applications.
If you have any questions, stack them up in the comments and they'll be answered ASAP.

... more @ blog.hasura.io

blog.hasura.io