Everything You Need to Get Your GQL Server Production Ready

Rate this content
Bookmark

There are always a lot of questions and conference talks about bringing GraphQL servers into production, but there aren’t a lot of good concrete steps and actions to follow. In the workshop Uri (The founder of The Guild) will walk you through The Guild’s process of bringing GraphQL Server into production.

We will add:

- Powerful Caching
- Logging, Monitoring and tracing
- Security features like Auth, Error Masking, Persisted Operations, Depth and Rate limit


If you are planning to have your GraphQL server running in production, this is a must have workshop for you!

Uri Goldshtein
Uri Goldshtein
130 min
08 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Uri from The Guild introduces GraphQL and its advantages over REST. Implementing GraphQL in production involves starting with a simple use case and using a product-driven schema approach. Code generation plugins and tools like GraphQL Mesh simplify the implementation of GraphQL. The workshop demonstrates how to install GraphQL Mesh, generate a schema, and configure sources. Envelope, a plugin system for GraphQL, provides customization and flexibility, simplifying server development and enhancing security.

1. Introduction to The Guild and GraphQL

Short description:

Uri, a member of The Guild, shares about the group's work and the open-source tools they build. The Guild focuses on sustainable open-source development and ensures their tools are used in production. The tools can be used separately and are designed to be flexible. Uri introduces GraphQL and its advantages over REST, such as reducing round trips and over-fetching. He mentions the project to improve graphql.org and invites others to contribute. The client can query the GraphQL Engine, which executes the query and returns the requested data.

So I'm Uri. I'm a member of a group called The Guild. How many of you heard about The Guild? No one? I've heard. Okay, cool. So I'll just share a bit. The Guild is a group of open source developers. I personally started this group a couple of years ago. I used to work at Apollo. I was actually in the team that started Apollo. We built another thing called Meteor. It was a JavaScript framework, and we thought what would be the next version of Meteor. Back in the day, it was just the days that Facebook opened source to GraphQL. So we thought that maybe the next version of Meteor will be based on GraphQL. And that's how we started Apollo Client, and Apollo Server, and GraphQL Tools Library, and many things that are still popular today.

So I started there at Apollo, and then after a while, I decided to build another group that is structured a bit differently to basically build a sustainable open-source. So the libraries will be well-maintained for the long run, for many, many years, and there wouldn't be pressure of, like, there would be less pressure of selling a product but more of just making sustainable open-source. So that's the yield, like, tools that we build today are GraphQL Code Generator that I'll talk a bit about today, GraphQL Mesh, Envelope, GraphQL Inspector, GraphQL Modules. Very new, we took over GraphQL Yoga, if some of you have heard in my talk, I'm doing also the keynote for GraphQL Galaxy, and in the keynote I'm gonna announce something about that, so you will know that even earlier than everyone. We basically today are the biggest open-source group in GraphQL, and we also do a lot of work that is outside of the GraphQL realm, like with OpenAPI and all kinds of other APIs, like JSON Schema, grpc, all kinds of other, so we do work there as well, so that's a bit about us, and how we work is that we work with actually clients, with companies. We build open-source tools, and then we consult, and also help them introduce the tools, and improve the tools, and things like that, so all of the tools are being built out of real necessity, like that we don't open-source a tool that none of our clients are actually using in production, everything open-source is something that we use in production, so you can know that you can rely on it, and you know there's an actual need for it, and it's not like something we're selling to you, or we do it for popularity reasons, or things like that, so that's a bit about the Guild, every member of the Guild is a member that actually contributed to open-source before they joined the Guild, and also sometimes maybe it's hard for you to find our libraries, because all of the libraries are under people's names, and not under the Guild name, we believe this is a better model for a more sustainable open-source, it's very rare, it's not something that is very common, but that's how we do it today.

I mentioned the Guild in the beginning, we build a lot of different tools, I won't talk too much about that, but just that all of our tools are built in a specific way, both in the open-source way that I mentioned at the beginning, and also they complete a full platform, so the idea is that it provides you with everything you need from the backend to the frontend to build an app, but you could use them completely separately, we're not pushing you to use them, it's not like a vendor locked platform, each tool could be used by itself, we try to break down these tools into the smallest pieces we can, so they will be the most flexible that's possible. And I'm mentioning it now because I think it's important and that's also part of the reasons of why we created some new tools that I would introduce today, because we think in that way actually we can solve things better. And so, I'll touch a bit about that and I'm also doing my introduction to the tools. I'll share maybe a tutorial with you that I think in my opinion, it's better structured compared to other GraphQL tutorials out there because it separates some things. So, I'll get to that soon. But let's go back to the basics of GraphQL. Again, everyone here knows probably a bit about what GraphQL is. It's a query language. You could describe the data that you want to query in a schema. That data could be any data. That's the interesting part about GraphQL. It's a query language, but unlike SQL, where you need to structure your data and your tables in a certain way, here, you could basically create a schema, query that schema, get predictable results. But that schema could describe any data. It could be something you layer on top of a REST API, which is very common. It could be just a file. It could be a database. It could be anything that you have, any data that you want to query, an Excel spreadsheet, anything. So that's interesting because you can now start building graphs of data, of whatever data you have. And you can also layer it in places that are, let's say, that maybe you didn't think about before. I hope I can touch upon it again. So I'm skipping this one. It's just an example of, with REST, you could like query any, if you want to get a list of chats and stuff like that, then you're gonna like query back and forth and maybe you need multiple requests and response. And you could build custom REST endpoints, right? So it's not always true. You could build the perfect REST GraphQL endpoint and you will still get exactly what you want. But that means that that work is being done on the backend. With GraphQL, the client could just describe what they want and get exactly what they want. So extra round trips is like something that a lot of people are talking about as a, I don't know, is something that GraphQL could solve and also over fetching, right? Like you might have an endpoint and in this case it's a certain endpoint for repos on GitHub and you're going to get tons of information that you might not need. So over the wire where that matters, you're going to get a lot of information. This is just something I copied from GraphQL.org. By the way, we are now kind of like we rebuilt the infrastructure for GraphQL.org and we were trying to make it the better resource. So, one thing if any of you are actually interested in documentation and helping your team on board and things like that, I hope to make graphql.org the best place to go and learn about GraphQL and to find all the resources and everything I'm saying now, hopefully you won't need to talk to me. You can just go to graphql.org. So, if any of you are interested in helping, this project didn't move so much for many years and now we to cover it and hopefully we can make graphql.org a better website. So yeah, so, you know, GraphQL what everyone is displaying is that like, I can query for just the data that I need and I can send one query and get back one result. Today we're going to talk about more advanced stuff as well. A bit about, you know, maybe an illustration of how it works. So we have a client and let's say some data sources and in the middle we put, let's call it the GraphQL Engine instead of a GraphQL server. And I hope you can, later on you'll understand why I'm calling it an engine and not a server. So, and we can describe the data of all these data sources using a schema. So you write that schema. There's many different ways of running that schema. We can talk today also about like different ways of writing a schema, that schema could, it could be written merely. And that manual schema could be written in what's called an SDL. So the actual language of GraphQL, what you can see here on the left, but it's gonna also be written with code. So you could write like classes that represents these data structures and there's plus and minus or objects that represents these data structures. And there's plus and minuses for both approaches. And there's also different libraries for all these approaches. If you're interested in that, let me know because I have a lot of opinions about that. So we describe the schema and then the client can basically query for a certain thing that they want, let's say in this case, the user with AB2 and a name, and then the graphical engine would get that query and will execute it in the most efficient way they can. So they would go and fetch maybe the user and then extract from the user object the name and send us back what we actually need.

2. GraphQL's Function and Benefits

Short description:

GraphQL automates a lot of the data work we do, awaits and orchestrates network calls, and shapes data as needed. It provides network performance, a schema of the data graph, orchestration, automation, and the ability to model data from different sources. These are the benefits of GraphQL.

And if we want more information about the user, let's say we send a bigger query, so maybe the servo will get us back the user object and then the graphical engine will actually fetch in parallel the name and the messages if they can see that it can. And then maybe the content can come from a completely different source, but the way we modeled it, we modeled it like the client sees the data, wants to see the data and we modeled it like messages and their content are basically look like the content is basically the same. It's part of the messages object so then the client gets back one single results and it doesn't matter how complicated the server is or how many data sources or how many services your backend has. For the client they get the representation of the data that they expect, which is an important point, I think when we'll get to talk a bit about GraphQL mesh, which I'll talk, I hopefully get to talk today.

You will see that there's two different philosophies of how do we describe the schema of the data? The schema that is basically all of our data sources together in a graph or the schema that the client actually needs. And I hope to show you today that those are, might be two different schemas. So, yeah, so that's like a basic illustration of how GraphQL works, very basic. Now let's dive a bit deeper into that just to understand, because for me, when I talk about GraphQL, I actually just see that there's a function. So I'll show what that function is actually and what that function is actually doing.

So when we describe the data, we also write resolvers. Resolvers are the way to tell GraphQL how to fetch each field. In this case, you know, we have a function. Let's say we want the user's name. So we basically create the function that we know what is the object that it's gonna get as inputs. We know what the inputs that were getting into the function. In our case, it's like a user object, let's say. The parent of, the parent resolver, the entry point for the graph. And then we can execute any code we want. It's basically a function. So we can do whatever we want in that function, including calling another server or anything, and we need to return a string because we defined a string. So that's what we need to do when we create a GraphQL server or a GraphQL engine.

Now, everything you're gonna see in this slide is basically a slide that I'm trying to explain to you like the basic work of what the GraphQL function is doing internally. So everything here, I always, when they show that slide, I ask people to think while they are seeing that slide, where do you write the code today? So the GraphQL function basically gets these resolver functions that were created in the schema. Then it creates, and the other argument that it gets is a query. Really, think about it as a function that's called GraphQL and gets two variables, two inputs. One is called executable schema is that definitions that we see on the left, and their functions. And the other argument is that query that might change between different calls. And then what the GraphQL function will do is that it will get that id 10 that we got on the top, on the query, and execute the first box, the first function. And it will get back an a result. That result would be a user object, let's say. Now it knows by the credit that we need a name and a message. So what GraphQL will do is it will take the boxes and will execute them in parallel because it can, because both of these boxes are actually requiring the same parent value. So it will execute them in parallel. One box, the name will give us the string, we're done. So it will put that in the right place. Then the messages, we actually get three different messages, objects. And for each one of them, we want the title and the date. So now the GraphQL engine will actually run all these different boxes for all the different results. And when the results will arrive, because all of this is async, every box here is an async function. So we can call a remote endpoint or something like that. When the results will get, it will put all the results in the right structure in the right place and will give us back the results. That's the GraphQL function.

Now I think, so what we saw here is GraphQL not only like just minimizes the data that we send over the wire or something like that, but actually GraphQL automates a lot of the data work that we do ourselves, maybe in code or in other means. So GraphQL awaits and orchestrates all the different network calls that we needed to make and all the different actions that we needed to take in order to get the data that we want. And then it also shaped the data in the way that we want. And I think that's the biggest benefit of GraphQL in most environments. In most environments, it's not about necessarily saving some bytes over the network, but actually automating a lot of the data work that we do anyway. And the data work is done in many different ways. It could be done on the client, it could be done on a server, it could be even done on like data analytics services and stuff like that, they query many different services from many different data sources, get the data that they want, and then do some analysis. So all of these could potentially benefit from GraphQL. So, that's kind of like what I just said, like we get network performance, we get like schema of the data graph, but also we get orchestration and automation and we get to have relationships and to model all of our data in a certain way, even if there's many different sources that might not necessarily be connected otherwise. So those are some of the benefits that I think GraphQL has. By the way, if it's very basic, let me know and if you have questions or you want to take me into other directions while I'm saying that, then also let me know.

Watch more workshops on 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 🤐)
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
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
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

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

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
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!
TypeScript and React: Secrets of a Happy Marriage
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
TypeScript and React are inseparable. What's the secret to their successful union? Quite a lot of surprisingly strange code. Learn why useRef always feels weird, how to wrangle generics in custom hooks, and how union types can transform your components.