All Things Graph...

Rate this content
Bookmark

REST is an API design architecture, which, in the last few years, has become the norm for implementing web services. It uses HTTP to get data and perform various operations (POST, GET, PUT, and DELETE) in JSON format, allowing better and faster parsing of data. But REST comes with some downsides that have enterprises considering alternative mechanisms to manage performance, developer time, and production of their APIs — enter GraphQL. GraphQL doesn't have to be a replacement to REST, the two API designs can co-exist and be leveraged for the appropriate use-case. Join us for a conversation about what benefits, shortcomings, tooling, and design decisions you need to consider while making this evaluation.

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

FAQ

Sedghi is a Technical Lead at Tyk, where he leads a team of talented sales engineers and consulting engineers.

Tyk specializes in providing open source API gateway solutions and full lifecycle API management.

Sedghi discusses GraphQL, REST APIs, API management, and the integration and transformation of APIs using Tyk's platform.

Tyk can automatically convert REST APIs into a GraphQL API, allowing for more efficient data retrieval through single API calls.

The example demonstrates how a single GraphQL API call can retrieve data that would typically require multiple REST API calls, by integrating user and post data into a unified response.

GraphQL reduces the need for multiple API calls by allowing clients to request exactly the data they need, all in a single request, thus optimizing data retrieval processes.

Sedky Haider
Sedky Haider
8 min
09 Dec, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
GraphQL is an up and coming trend in API development, allowing for the combination of REST endpoints into a single API call. Tyk, an open source API gateway vendor, is now offering full lifecycle API management. With GraphQL, developers can import REST APIs into Tyk and convert them into GraphQL APIs, simplifying the process and reducing the number of API calls required. This lightning talk provides a demonstration of importing IDs, defining data sources, and combining endpoints using GraphQL.
Available in Español: Todo sobre GraphQL

1. Introduction to GraphQL and Tyk

Short description:

Hello, everybody. Thanks for coming to watch this lightning talk on GraphQL. My name is Sedghi, I'm a Technical Lead at Tyk. GraphQL is an up and coming trend. We're an open source API gateway vendor and now full lifecycle API management. Today, I'm going to import some REST APIs into Tyk and convert them into a GraphQL API. Let's go to the API management dashboard and see how it works.

Hello, everybody. Thanks for coming to watch this lightning talk on GraphQL. I'm very excited to talk to you today. So who am I real quick before we get into, what are we talking about? My name is Sedghi, I'm a Technical Lead at Tyk. I lead a group of very talented sales engineers and consulting engineers. And we talk to customers all over the world and from companies of all sizes about GraphQL, about rest, about APIs, about Kubernetes and Docker. It's a very fortunate position to be at a cross function of many different domains intersecting.

GraphQL is an up and coming trend. And what is Tyk? We're an open source API gateway vendor and now full lifecycle API management. So feel free to go to tyk.io and you get a feel for what that is.

So what are we going to do today? So I'm going to import some REST APIs into Tyk. So we have a collection of REST APIs, we're going to import them into our API management. We're automatically going to convert REST APIs into a GraphQL API. And then that's it, we're going to profit. I'm going to show you how easy it is to do that. And so what do we have? So we have a user REST endpoint that has an ID, name, username, email, and then posts. And this post it's an array that refers to all the posts made by this user. A post has these fields, and then it posts those comments, and a comment is an array of this type. And so these are three different endpoints. I'm going to compose this into a single GraphQL API for you, and we can talk about the different approaches.

All right, so let's go. So here we are, I'm in the API management dashboard, we're not going to get into the nitty-gritty of all the different stuff, but you can see we have this API here, it's called GraphQL posts v2. And right now, we have a user type and a post type. So I've already defined my schemas, and it's a one to one representation of the underlying API. So if I go here and I go to users one, so I want the rest resource of where the user ID is one, and it returns to me all the JSON payloads. So we have Leanne Graham is the name, the username, the email, and so on. And so I've taken these fields from JSON, I've mapped it into this GraphQL schema. And then I went and I injected posts. So here we have a second API, and it's called posts. So we have all the posts that belong to this user.

2. Using GraphQL to Combine REST Endpoints

Short description:

You can see it's an array where each post has an ID. We're going to pull that using a single API call. We get back all of the data from two separate endpoints combined into a single API call. Now, we'll inject comments as a subarray of posts. We've generated an API in Tyk and imported all of the endpoints. Next, we'll define a new schema for comments.

You can see it's an array where each post has an ID. And so that's two different rest endpoints. Now I'm going to show you how using GraphQL, we're going to pull that using a single API call.

So we have this user, where the ID is one. If you've never seen this before, it's a GraphQL playground. It allows us to query data, it has IntelliSense, which is going to help us actually to show what fields we can ask for. And so I want the ID name and email for the user where the ID is one. And next I want all the posts. And I want the title and the body of each post. And if I fire that off, we get back all of the data that we just got back from two separate endpoints. And we've combined into a single API call. So we'll talk about why that's powerful shortly.

But first, so you can see that there's no vaporware going on here, we'll go ahead and we'll inject comments as a subarray of posts. So comments looks like this. And so we're going to go to the comments endpoint and you can see where the post ID equals X and you get all the comments with their IDs that belong to the post where the ID is Y. So we're just going to go ahead and inject that. So what I'm going to do is I'm going to take the Swagger JSON or open API spec. I'm going to go into Tyk and then I'm going to import an API and we can see it from Swagger and then I'll grab the endpoint here and I'll dump it in. So we have that. There's the base URL and there's the version and then we're going to generate the API. And just like that, we've generated an API. The listen path is foobar and the authentication type is openkeyless. So we'll go ahead and create that. If we go under Endpoint Designer, we can see that we've imported all of the endpoints. So we have the post, the to-do, users, albums, photos, comments, and so on. And so now we've imported our API. It's now in Tyk.

Now the next thing to do is go ahead under our graphical. We're going to define a new schema. So it's a type comment where, let's see, a comment has an ID, a name, and an email.

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

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
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.
Understanding React’s Fiber Architecture
React Advanced 2022React Advanced 2022
29 min
Understanding React’s Fiber Architecture
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
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.
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
Today's Talk introduces TRPC, a library that eliminates the need for code generation and provides type safety and better collaboration between front-end and back-end. TRPC is demonstrated in a Next JS application integrated with Prisma, allowing for easy implementation and interaction with the database. The library allows for seamless usage in the client, with automatic procedure renaming and the ability to call methods without generating types. TRPC's client-server interaction is based on HTTP requests and allows for easy debugging and tracing. The library also provides runtime type check and validation using Zod.

Workshops on related topic

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.
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
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
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.