Learning GraphQL: from curious to confident

Rate this content
Bookmark

GraphQL is a query language for APIs that provides a complete and understandable description of the data in your API while giving clients the power to ask for exactly what they need and nothing more. While there are a number of benefits of GraphQL, there are also various challenges to adopting GraphQL APIs within organisations. So, is GraphQL right for you? If so, where do you get started?

In this workshop, we will take you through the various concepts of GraphQL in a hands-on manner with the objective of helping the audience understand GraphQL as a technology and evaluate if it is the right choice for their project/organisation.

Table of contents:
- What is GraphQL - An overview of the technology and why it exists
- The REST v/s GraphQL debate
- The GraphQL ecosystem - tools and resources
- Project setup (React + Express + Tyk)
- GraphQL concepts: basic hands-on
- GraphQL API management with Tyk
- Schema stitching with Tyk Universal Data Graph
- Conclusion

Buddha Bhattacharya
Buddha Bhattacharya
135 min
06 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Welcome to the workshop on building and managing GraphQL APIs. Today, we'll be learning about GraphQL, building APIs with Express GraphQL, securing GraphQL endpoints with Tyke, and creating a GraphQL endpoint using Tyke's universal data graph. GraphQL provides flexibility and eliminates overfetching and underfetching of data. We'll explore querying information and mutations, as well as the concept of resolvers. We'll also learn about GraphQL API management with Tyke and the benefits of using Tycloud. Additionally, we'll see how to migrate from existing infrastructure to GraphQL using Tyke's universal data graph.

1. Introduction to GraphQL

Short description:

Welcome to the workshop on building and managing GraphQL APIs. Today, we'll be learning about GraphQL, building APIs with Express GraphQL, securing GraphQL endpoints with Tyke, and creating a GraphQL endpoint using Tyke's universal data graph. GraphQL is a query language for APIs that provides flexibility and eliminates overfetching and underfetching of data. Both REST and GraphQL have their own benefits and drawbacks, and they serve different purposes. GraphQL offers more flexibility for omnichannel product distribution and allows front-end developers to request exactly what they need.

Welcome, once again. Thank you so much for joining me this morning, evening, afternoon, depending on which part of the world you are joining us from. And as Agatha says, we do have a fairly international crowd joining us today. So once again, thank you very much for joining me.

Today, we are going to be learning all about building and managing GraphQL APIs. So essentially this workshop is going to be about learning GraphQL and going from curious to confident over the next two and a half hours. And what does that actually entail? We are going to be during this period of time, we're actually going to be building out a few APIs. We're going to be managing that using Tyke. We will go into the details as we move along.

Before that, a little bit about me. I am Budha, I am a Product Evangelist here at Tyke coming to you today from Boston US. So that is me, I am working for Tyke. We are a cloud native API and service management platform. A little bit more about us in a few slides. Before that, let's talk about what we are going to be doing today. We are beyond the introductions. We are going to be looking at building out a GraphQL endpoint with Express GraphQL. We will be working to create a very simple GraphQL endpoint and run it on a local machine. We are going to be securing our newly created GraphQL endpoint with Tyke. We will be adding a few security features. I will talk you through some of those. Essentially looking at the entire lifecycle management of your GraphQL endpoint that we are creating today. Finally we are going to be doing something really exciting. We will be looking at building a similar endpoint with Tyke's universal data graph. This is the no code version of what we are going to be doing using Express GraphQL. That is what is on the agenda for today. Without further ado, let me tell you a little bit about, this is the company that I am working with. We are a cloud native solution, cloud native API and service management platform. Essentially, we are powered by our low-latency open-source API gateway, which is essentially the brains behind the operations. Together with our really beautifully designed Tyke dashboard which is essentially a user interface in terms of interacting with all of the different capabilities of our Tyke gateway. Then we have our developer portal which enables you to expose and publish the different APIs that you would have for consumption by third party developers as well as partners. Our API gateway is capable of handling REST, GraphQL, and gRPC APIs. Today, we are obviously going to be looking at a subset of that, we are looking at GraphQL and we support that in many different ways, some of which you will be seeing today, specifically, around security where we talk about not just at the endpoint level around authentication authorization, we are also gonna be looking at rate limiting our endpoints, we will be looking at query depth limiting as well as field-based permissions, so very very specific to the data layer of GraphQL. And then finally we will be looking at the universal data graph where we will be combining REST endpoints, a couple of REST endpoints that already exist and creating a GraphQL endpoint in no code manner in a very very simple and quick way. So, that is who we are, that is who TAIK is, let's dive right into the introduction to GraphQL.

Now some of you might already know this, this particular workshop that we are going to be running today is really for people who are slightly new to the world of GraphQL, they haven't really built much of GraphQL APIs, maybe you have tinkered around a little bit but haven't done a whole lot, much more than that, but you have had… you are being curious about GraphQL for a little while, so hopefully we will satiate that curiosity today and hopefully build a little bit more confidence with some context, with some knowledge base, with some hands-on sessions as we move along, and that will enable you to build your own GraphQL endpoints and write your own queries and your resolvers as we move along.

So just to quickly introduce GraphQL, this is the definition of GraphQL as mentioned on the GraphQL org. It is a query language for your APIs. Now, what would that essentially entail? We are looking at GraphQL, which was created by Facebook. It was developed internally in 2012 with Facebook, and then that was publicly released in 2015. It was built for omnichannel products. Essentially, that was kind of the use case that Facebook used to introduce or build or create GraphQL. They were introducing, they were essentially jumping, diving into the world of omnichannel products, and the efficiency of building them using REST endpoints was proving to be quite a lot challenging in the early days of Facebook. And therefore, they created GraphQL, which is essentially a flexible way that caters to the needs of multiple platforms with varying needs instead of just creating multiple APIs that are really, really focused and tailored to just one particular thing. The challenge there obviously is that, as your distribution channels essentially expand, if you need to build your REST endpoints specifically for each one of those different platforms, then that could essentially build up really, really quickly and it becomes a lot more difficult to manage, especially when you are really working out of a common data base that essentially you're working out of or data source. And then finally, it gives you exactly what you need. There is no concept of overfetching. There is no underfetching of data. It is very, very specific. You query what you need and you get back in a very, very predictable structure what you or your platform essentially needs to consume. So this is again, one of the big selling points, as we say in the world of GraphQL.

Now, moving on, this is again, a very, very typical conversation. Every single time that we talk about GraphQL, there's always a question around REST versus GraphQL, or which is better, which is worse. I think simply put, I believe, I have to say I believe in this case. I'm of the camp where I think both have their place in this world. Each of them has their own benefits. Each of them has their own drawbacks. These are essentially tools. And tools usually are important only in the context of the problems that they solve. Now, if you take REST, REST are again, they are very, very focused on resources and how you would create a request. You get back a response. There is an endpoint that you work with, slightly easier to secure, slightly easier to manage. There are cache mechanisms that will essentially be useful. There are status codes that are dedicated to REST end points. So in that sense, REST can be fairly easy to get started with, but it does have its own drawbacks where there is a distinct lack of flexibility that could come in to REST, especially when you're catering to an omni-channel sort of product distribution mechanism. You can then, therefore, become a little bit more prone to over-fetching of information or under-fetching of information, again, depending on just, if you're asking a request exactly what you need, then that is fine. With the use case that the REST endpoint was built with originally, if you're just catering and tailored to just that, that's perfectly fine, but as soon as things start deviating, things can become a little challenging as you move along. So GraphQL again, comes in to solve that particular challenge where you have this level of flexibility where the consuming application of the front-end developers essentially have that power to request exactly what you need or do exactly what you want, depending on the kind of front-end platforms, so kind of consuming applications that you're looking at. A similar example of this is essentially if you look at, well, I'm looking at the weather at the moment. So if you look at a weather application, for instance, the requirement of a weather application, the data requirement of a weather application on a desktop versus a mobile device versus a wearable device can be very, very different.

2. Introduction to GraphQL Schema and Types

Short description:

GraphQL provides flexibility and eliminates overfetching and underfetching of data. It enables a common base or schema that can be consumed based on the platform making the request. However, this flexibility brings challenges in terms of query structure and depth, as well as security. GraphQL does not adhere to standard REST rules and allows custom error objects. The choice between GraphQL and REST depends on the specific use case and priorities. The GraphQL schema defines the blueprint of the API, including types, queries, and mutations. Queries are used to request information, while mutations are used to manipulate data at the data source. Subscriptions, which listen for changes, are another type in GraphQL. Types and fields are the essential building blocks of a GraphQL schema, with scalars representing basic types.

And what you want to avoid is essentially having a single REST endpoint that is being called across all of these platforms and half of the information that is going to the wearable devices essentially underutilized because you don't need all of the information. You're not going to display all of that information. That is where graph QL sort of shines out here where you can have that common base of or a schema as we call it in GraphQL, which we'll talk about in a little bit.

You create the schema essentially with all of the different fields that you want exposed, all of the different data points that you want exposed. And then that can be consumed specifically based on the kind of platform that is actually making the request. So that does enable a lot of flexibility, but that flexibility also brings with itself a little bit of a challenge because with that flexibility, essentially, the onus is on the consuming application to essentially use it in whichever way you want, which means that the structure of the queries, the depth of those queries and what order of that query is gonna be is slightly unpredictable. It's a lot more unpredictable in that matter.

Of course, now it is predictable in terms of the way you would query information and receive information, but you as a developer of the backend resource may not have total control in terms of exactly how the frontend application is actually requesting that information, can be requesting in many different ways. So you need to be careful specifically around security in this case, where you need to have the power to essentially expose the different fields that you want to be exposed depending on the kind of users that are gonna be using that application. And to take the point even further, you're also looking at things like multiple depths or multiple layers of depths when it comes to making those queries. So you can go deep, there is really no well-defined limit in terms of how deep you can go with these queries. You can have nested queries within GraphQL and that can again cause issues around server load management and sometimes these can be required but sometimes these can also be malicious. So there are a couple of challenges because you're no longer just working at the API endpoint level. You're not just working at that HTTP level which is essentially what REST does where you obviously need to have an authentication authorization there but you also need to think about what's going on at the data layer as well where all of your queries and the requests are coming from. So, there are a couple of different challenges there.

Again, it doesn't adhere to the standard rules of your status codes and errors. Typically, you can have errors even with a status code of 200 which is again, something that can be a bit of a challenging thing to work around. But again, because it is flexible you can write your own custom error objects and you could provide a lot more information depending on what your use case could be. So there are positive, there are negative. So I think the mantra here is to ask the question that you, the question that you really need to ask here is, what is my use case? And what are my priorities? Each of these tools, each of these, well, API styles have their own positives. Each of these API styles have their own challenges. So which of these challenges are deal breakers for you? Which of the use case are you really, really focused on? And depending on that, you can make a choice. So either one of these essentially could work for you depending on your use case. It is not a question of GraphQL coming in to replace REST. Essentially each one of them have different problems that they can, they are really, really good at solving. And you should ask which question or which problem that you're gonna be, that matters to you, and therefore pick a solution accordingly. So that is a little bit of a gist around GraphQL. A quick introduction into the world of GraphQL.

I want to also introduce a couple of really, really simple GraphQL concepts, which essentially would help you to understand further as we start building out our solution. So what I've done here is I've just taken this schema. This is essentially the schema that we are gonna be building based off of. So this is gonna be the end result of the Express GraphQL app that we're gonna be building over the next hour. So let's start with defining what a schema is. A schema is essentially in GraphQL, a schema is essentially the blueprint of your API. It defines all of the different types, all of the different kinds of things that you can do, the different actions that you can take, the different data that you can request. So that is essentially the blueprint of your entire GraphQL API. Now, beyond that, if you see here on top, you see something called type mutation, you see something called type query. Now, if you go back to the objectives of APIs, you look at perfoming CRUD applications, the C-R-U-D, which is essentially create, read, update and delete. These are the basic tasks that you want to accomplish usually with your APIs. Maybe one of them, maybe all of them, depending on what you want to accomplish. So in rest, you would have something like get requests for your requesting information, reading information, your R within the CRUD, creating, probably making a POST request, updates could potentially be patches, maybe even puts and delete, could be just delete. So in a similar vein, essentially, we have our two different types here, which is essentially querying and mutations. Queries, typically, are meant to request information, as the name would suggest. Now with queries, essentially, this is the structure that you will see, you define the kind of actions that you can take or the kind of information that you can request, and queries will help you accomplish it. Now this is by far the most utilized aspect of GraphQL. Mostly, this is kind of the request that is made. But beyond that, we have what you call is mutations. As the name suggests, mutations essentially is manipulation or changing or modification of data at your data source. Now that would include adding new information, adding new data to your data source, that would include updating data to your data source, or it could be about removing information from your data source. In today's example, we'll be actually looking at how you could add a user. But perhaps as an exercise, when you go back and try it out yourself, perhaps you could also explore how you can update and delete information as well, as maybe when you try and practice these things yourself. But, so those are kind of the big two. If you are starting off with a schema, this is essentially where you would start off, this is kind of the objective of essentially building out your schema. You're either trying to enable people querying your information, querying your data sources, or you're trying to enable people to actually make changes or modify those data sources. So queries and mutations. There is a third type here, which is subscription, which is essentially a listener. You can listen for changes to your data source, but for the purpose of today's conversation, I'm gonna leave out subscription, but do feel free to read up on that as well. There is gonna be an exciting new update that I'll be talking about maybe in a month's time, so stay tuned for that. But subscriptions, again, unlike what you would have with your basic REST operations, subscription comes pretty much built out, built in to GraphQL, and it's a mechanism for you to listen for specific events, or listen for changes, for example, to maybe user information, maybe changes to if there is a new to-do list that is being added, then maybe you want to be notified based on that. So that's what subscriptions do. But we'll stay focused on queries and mutations for the purpose of today's demonstration.

Now, beyond that, if you look at it, the very, very, the, what do you say? The building blocks, the essential building blocks of your GraphQL schema is, or are, your types, your types and your fields. Now, if you see an example here, you've got your type to-do, you've got your type user, and within these types, these are essentially objects. These are objects that are defining the different kinds of data, data that you can, different kinds of fields that are come together to provide the information that you need. They usually have a correlation to your data source behind the scenes, as you will see in really, really shortly, but they're also defined by, these fields have types associated with them. So these are what you would call scalars. Scalars are essentially built out of GraphQL, again. So you have some basic types that are already provided by GraphQL. You have your int, you have your strings, you do have a Boolean as well. And then further on you can also have lists.

Watch more workshops on topic

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
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.
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
Adron Hall
Adron Hall
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura

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!
Understanding React’s Fiber Architecture
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
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.
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'.