Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS

Rate this content
Bookmark

GraphQL is a powerful and useful tool, especially popular among frontend developers. It can significantly speed up app development and improve application speed, API discoverability, and documentation. GraphQL is not an excellent fit for simple APIs only - it can power more advanced architectures. The separation between queries and mutations makes GraphQL perfect for event sourcing and Command Query Responsibility Segregation (CQRS). By making your advanced GraphQL app serverless, you get a fully managed, cheap, and extremely powerful architecture.

Slobodan Stojanović
Slobodan Stojanović
28 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

GraphQL is a strongly typed, version-free query language that allows you to ask for specific data and get it in JSON format. It simplifies data retrieval and modification by allowing the server to handle all necessary operations. Serverless architectures, such as AWS Lambda, are scalable, cost-effective, and good for event-driven applications. Event sourcing and CQRS are techniques that ensure consistency and separate reading and writing parts of an application. Building a GraphQL API with commands and queries can be achieved using AWS AppSync and DynamoDB. This approach offers low latency, scalability, and supports multiple languages. Challenges include application complexity, data modeling, and tracing, but starting with simplicity and making something work first can lead to success.

Available in Español

1. Introduction to GraphQL and its Benefits

Short description:

I'm here today to tell you a few stories. First story is about GraphQL. Facebook built a mobile application packed inside a web view with data fed as HTML. They had issues with serving data, so they came up with GraphQL. It allows you to ask for specific data and get it in JSON format. GraphQL is strongly typed, has a hierarchy, and provides documentation. It's version-free.

It's good that you're having fun. I'm here to change that. So I love stories, of course, as everyone. I'm not that good at telling stories. But fortunately with AI, I can just ask it to pretend to be some famous writer or something like that and help me out.

But I'm here today to tell you a few stories. First story is about GraphQL. Many of you know GraphQL and many of you know an application called Facebook. Now probably mostly used by our parents and things like these. But Facebook application at some point in time built a mobile application. It was just a mobile view of that application which was packed inside mobile app as a web view. And they actually feed the data to that app as HTML. So it was rendered somewhere on the server and just sent as a full HTML to the application.

And then a bit more than 10 years ago there was a big title everywhere in front end news JavaScript articles that was like by Mark Zuckenberg. He said that their biggest mistake at that point was betting too much on HTML5. And then they decided to rewrite their application and build a real mobile application at that moment with native code and everything. But their big challenge was like how to serve data to that application. They tried using REST, then some FQL which was Facebook Query Language or whatever. And then they had an issue with basically differences with data that they want to present inside the application and the data that was returned by server.

Now that's probably not the huge problem because our Internet is much faster, but at that moment instead of just getting posts and things like this, getting like full responses and doing many round trips was a bit of a problem. So they come up with a cool tool called GraphQL where basically you can ask your server for specific data and it can give you the data. It works something like this, it's like you define the data that you want. For example I want user with specific IDs but I don't want everything about that user, I just want like a few specific things and I want to get a picture with specific size and maybe first 5 friends of that person and then server will give me JSON in the same format which is amazing. And another amazing thing about GraphQL that was called GraphQL and it's still called GraphQL. The cool thing is that you define that data shape, you have hierarchy which helps like GraphQL to know which data to load first and things like this, it's strongly typed that helps you to navigate that schema and everything easily. It's a protocol, not really a different way of writing a whole server-side back end or whatever. It's basically just defines the data shapes and the rules by which it works. And another cool thing was that you got like documentation out of the box with that introspections schema you can ask GraphQL, hey, tell me what can I query for user and things like this. Something that I'm not sure if it's a good or bad thing was version-free. It's basically not version.

2. Introduction to GraphQL Basics

Short description:

Before GraphQL, applications worked by sending multiple requests for different data. GraphQL allows you to tell the server what data you want, and the server will handle all the necessary operations to retrieve and return that data. Types, schema, and resolvers are used to define and retrieve the data. GraphQL supports queries, mutations, and subscriptions for data retrieval, modification, and real-time updates.

You need to be backwards compatible on a server because front end can ask anything that is available inside that schema. Before GraphQL, an application worked, and still they often work in a way that they send one request, then get a response, then ask for another thing using something from the first response, and then query third thing. For example, you want to get users from your database, but then you want to get their pictures from let's say Amazon S3 or something, and then finally you want to get some analytics from some third tool or something like that.

GraphQL basically did something that we had before Ajax and everything, which is basically tell server what they want. Server will do all the things and get you the data back, just not HTML. So types are just types. You define which fields you have and things like these. Then you define schema. For example, I have some queries here, and each query defines their attributes and then return values and things like that, and then I write something called Resolver, which basically tells my backend how to get that data. Resolver can be anything basically. It can read the data from a database or query some API or whatever. It doesn't really matter. When you write a query, GraphQL basically parses that query, validates that everything is fine, and then when everything is fine it runs that resolver for us, gets the data, and then pack the result in a way that we want. GraphQL supports queries, which is basically a way for us to get the data, mutations, which is a way for us to change something on the server side, and subscriptions, which give us updates and things like these in real time.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
Get rid of your API schemas with tRPC
React Day Berlin 2022React Day Berlin 2022
29 min
Get rid of your API schemas with tRPC
Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation. In this talk we will understand the benefit of tRPC and how apply it in a NextJs application. If you want reduce your project complexity you can't miss this talk.
You Don’t Know How to SSR
DevOps.js Conf 2024DevOps.js Conf 2024
23 min
You Don’t Know How to SSR
A walk-through of the evolution of SSR in the last twelve years. We will cover how techniques changed, typical problems, tools you can use and various solutions, all from the point of view of my personal experience as a consumer and maintainer.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
The Guild has recently released Envelop - a new, modern GraphQL Server Framework and plugin system. In this talk I’ll share a brief overview of Envelop and why you should probably upgrade your existing GraphQL server to it.
Rock Solid React and GraphQL Apps for People in a Hurry
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Rock Solid React and GraphQL Apps for People in a Hurry
In this talk, we'll look at some of the modern options for building a full-stack React and GraphQL app with strong conventions and how this can be of enormous benefit to you and your team. We'll focus specifically on RedwoodJS, a full stack React framework that is often called 'Ruby on Rails for React'.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.