Going from Zero to Building Multi-Region GraphQL Applications

Rate this content
Bookmark

Off late GraphQL workloads see wide adoption in enterprise workloads as GraphQL provides a consistent and flexible way for UI to consume data from the APIs. For API developers like me, seeing GraphQL servers abstracting away the data filtering and the access patterns associated with backend APIs is a complete paradigm shift. Traditional API design tasks, like data modeling, access patterns required to implement high-performance Data APIs, are still relevant when implementing GraphQL applications?

This talk will walk you through the learnings as a backend API developer building a hello world GraphQL application to implement a globally distributed GraphQL API for a real-world e-commerce application. We will look into scaling and resiliency required for building high-performance GraphQL APIs. Also, look into how database capabilities play an essential role in implementing a successful GraphQL application.

This talk has been presented at GraphQL Galaxy 2020, check out the latest edition of this Tech Conference.

FAQ

The speaker of the talk is Nikhil Chandrappa, a software engineer at UgerbyteDB.

Nikhil Chandrappa works for UgerbyteDB, a distributed SQL company.

Nikhil Chandrappa works in the drivers and ecosystem team at UgerbyteDB.

There is growing interest in GraphQL because it provides autonomy for UX developers to retrieve only the data they need, making it more efficient.

The primary focus of the talk is on building first-class support for GraphQL at UgerbyteDB and evaluating its performance and ease of use in production environments.

The e-commerce domain was considered for implementing GraphQL to provide challenges for both UX and API developers.

The initial tables used for GraphQL implementation were the product catalog and product ranking tables.

Advanced features of GraphQL highlighted in the talk include pagination, filtering, eventing, and subscriptions.

GraphQL subscriptions were used in the order management system to track user orders and receive notifications on status updates without polling for data.

The resilience of the GraphQL servers was tested by deploying them with a UgerbyteDB cluster and performing resiliency tests, such as taking out an entire region or a few machines in a region.

Nikhil Chandrappa
Nikhil Chandrappa
8 min
02 Jul, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The talk explores the rapid adoption of GraphQL and its benefits for UX developers, such as providing autonomy to retrieve only the data they need. It dives into server-side concepts of GraphQL architecture and its performance in real-world e-commerce use cases. The use of GraphQL subscriptions in order management systems is highlighted, showing how it eliminates the need for constant data polling. The talk also covers the integration of GraphQL with native database capabilities, managing varying traffic, and ensuring cloud application resilience. The testing of GraphQL's CRUD operations on a product catalog and product ranking dataset is discussed, emphasizing quick prototyping and reduced developer communication. Additionally, it discusses the use of GraphQL in microservices architectures.

1. Introduction to GraphQL and Evaluation

Short description:

I'm a software engineer at UgerbyteDB, a distributed SQL company. GraphQL is gaining rapid adoption, providing autonomy for UX developers to retrieve only the data they need. We wanted to understand the server-side concepts of GraphQL architecture and its fit with REST API development. We evaluated its performance and ease of production by using real-world use cases like e-commerce. We tested the GraphQL server's use of native database capabilities and its ability to handle varying traffic. We started with a simple table, the product catalog, and then moved on to a more complex dataset, the product ranking.

Hello everyone, thanks for joining, my name is Nikhil Chandrappa, I'm a software engineer at UgerbyteDB, we are a distributed SQL company. I work in the drivers and ecosystem team of UgerbyteDB, where we build integrations with popular developer tools.

Of late we are seeing a lot of interest in our community as well as from our users to build first-class support for GraphQL drive. If you do a quick Google Trend search, you will see GraphQL is gaining rapid adoption. For UX developers, GraphQL provides autonomy over creating the data, they are able to retrieve only the data they need right. For us, being a database company and also on a daily basis we work with the backend developers and API developers, it made sense for us to understand the server-side concepts of GraphQL architecture.

The GraphQL server which provides abstraction over the database for creating and mutating the data and also a few other advanced features like pagination, filtering, eventing. We wanted to see how all these things fit in with a general REST API development that we generally see. So an API developer would understand the business domain. He comes up with the domain objects. He implements all the access patterns around them. We wanted to see how graphQL server, how this all looks in graphQL server. For that, we wanted to use a real world use case. We considered e-commerce domain, which is well known. And also it provides challenges for both UX developers where they had to build an immersive, engaging experience and also API developers where they have to handle the, or where they have to implement the APIs for the randomness of the traffic.

So it's not always constant. It scales based on the user traffic, you have to scale up your APIs or scale down and also API needs to be available all the time. This is a general microservices architecture you will see for e-commerce applications. You'll have a bunch of microservices as exposed as a rest API, and this rest API will be consumed by the UI applications or the UX developers to implement UX apps. So it probably is a very quick sell for them to move to graphQL rather than going through entire docs. For us, during our evaluation, we wanted to see how well the graph qL server can use the native database capabilities. Is it performant or not? And how easy is it to get to production, right?

For that, we first wanted to use one of our simple tables, the product catalog. It doesn't have a complex access pattern. You get the product ID in the request and you send back the product details, right? It was a quick win for us. If you see from this complex JSON object that was being sent on the response. Now, Graphql clients are the UX applications can only retrieve the data they need. Once we dipped our toes in the water when we felt comfortable with the Graphql applications. So we wanted to have a much more complex table or the dataset coming into the picture. We took the product ranking which has a few things going on there. You have to filter the data based on the category and also sort it based on the ranking.

2. Using GraphQL Subscriptions for Real-Time Updates

Short description:

GraphQL simplifies the feedback loop between the API developer and the UX developers. It provides first-class support for subscriptions, allowing real-time updates without the need for constant data polling. We utilized GraphQL subscriptions in our order management system to track user orders and their status, eliminating the need for manual data retrieval.

So some of this happens on the database and few of these filtering is also happening on the API layer. One thing we quickly understood was any crud against these tables is super easy and it's fast. It leads to a faster prototyping where UX developer, you need not do back and forth with them.

As in when we were bringing more tables, we soon realized building all these domain mappings and the resolvers is kind of a complex task. It's not something you can have a couple of spins and you have to have robust GraphQL server. But that's where we kind of wanted to pivot to use some of the popular open source and GraphQL implement server implementations out there. So we kind of pivoted from that to use the open source tools.

In our research, what we kind of found out was all these tools have first class support for subscriptions, right? First class support for even based systems using GraphQL subscriptions, we wanted to use that. So in our iteration two, we kind of wanted to use GraphQL subscription. So we use it for a order management system where you want to track all the user orders and the status for them. We were super this kind of solves a lot of issues, right? You don't have to pull for the data, whenever there's a new status update, you kind of get the notification.

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

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
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
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
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
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

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
React at Scale with Nx
React Summit 2023React Summit 2023
145 min
React at Scale with Nx
Top Content
Featured WorkshopFree
Isaac Mann
Isaac Mann
We're going to be using Nx and some its plugins to accelerate the development of this app.
Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components
Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced 2022React Advanced 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