GraphQL Beyond HTTP APIs

Rate this content
Bookmark

You might be familiar with HTTP GraphQL APIs. Did you know GraphQL does not have to be delivered over HTTP? We can use GraphQL in some different contexts. asynchronous queries, batch operations, user-provided scripts, WebAssembly, webhooks, and many more. We will explore how Shopify uses GraphQL in different contexts and how you can extend your current GraphQL schema beyond HTTP APIs.

8 min
09 Dec, 2021

Video Summary and Transcription

GraphQL can be used beyond HTTP, including scenarios like WebSockets for real-time messaging. It is versatile and can handle background jobs, generate reports, export large amounts of data, and handle webhook payloads. GraphQL's support for WebAssembly allows for executing user-provided code while maintaining security and authorization.

Available in Español

1. Introduction to GraphQL Beyond HTTP APIs

Short description:

Let's talk about GraphQL beyond HTTP APIs. GraphQL can be used beyond HTTP, allowing for a variety of use cases. One example is WebSockets, which are ideal for real-time messaging.

Hi, let's talk about GraphQL beyond HTTP APIs. My name is Guilherme Fiera. Feel free to call me Gui. I live in Vancouver, Canada and I work at Shopify in the API Appendix Team.

GraphQL is commonly used as an HTTP API. You submit your query to the endpoint and get a response. This is how a request looks like. The client converts the query and the variables into JSON, adds some kind of authorization header and makes a POST request. This is an example of a GraphQL server executing a query.

Putting them side by side, we can see that the back-end routs the HTTP methods and path to a function or method. Then, use the request payload as arguments to building a GraphQL query. It gets the variables and the query keys. And it makes a query aware of the current user by checking the authorization header. Then, it executes the query and returns a JSON response. WebFramework is doing an excellent job on making very easy to get data from HTTP requests and performing any kind of business logic with them.

This is very good, but can we go further? Executing GraphQL relies on very simple data structures that can come from anywhere, not only from HTTP requests. The query is just a string. The variables, just a hash. And you're free to provide any context to the query execution. GraphQL doesn't depend on HTTP requests. HTTP is just a layer that transports our data, and GraphQL doesn't depend on any transport layer. GraphQL doesn't even require a network. This allows GraphQL to be used in a variety of use cases. Let's get to know some GraphQL use cases beyond HTTP APIs.

The first example is WebSockets. Subscriptions is a very common use case of GraphQL using WebSockets, but we are not limited to that. We can use WebSockets for any kind of real-time communication or asynchronous communication where you send a query or a mutation and you're not expecting to get a response right away. Or if you are sending several queries or notations, you're not expecting to get a response in the same order you submit it. And because WebSockets keep open connections, it's very performant and very suitable for real-time messaging.

In this example, the user is sending a message to a chatroom and we don't need to get the response of the mutation right away.

2. GraphQL in Background Jobs, Reports, and Webhooks

Short description:

GraphQL is versatile and can be used in various scenarios. It's particularly useful for handling background jobs, such as recurring tasks and asynchronous processes. With GraphQL, you can easily retrieve the necessary data for these jobs using the same logic and formatting as your HTTP API. It's also beneficial for generating reports, exporting large amounts of data, and handling webhook payloads. Additionally, GraphQL's support for WebAssembly allows for the execution of user-provided code while maintaining control over security and authorization. Thank you for watching!

We should be able to send several mutations and handle the response as they return. Another very good use case for GraphQL is in background jobs. We use background jobs for recurring tasks, for example, reporting, or sometimes for something that can be run asynchronous, like sending a notification. And we need to get some data for running those background jobs. And we can use GraphQL to get this data. It's very good because you get the data using the same business logic and formatting that you have, for example, for your HTTP API, so it's very easy to handle the data in a way it's useful for you.

In this example, we have a daily sales report where we can generate the GraphQL variables, in this case the beginning and the end of the previous day, and rerun the GraphQL query, and the results is the data that will be used by the mailer to send the report by email. And you can have a predefined query, so this can be the query that returns all the data needed to generate the email report, so here you have the start and end date timestamps that was generating when the background job ran, and you have the number of orders for this particular timeframe, and some of the latest orders with some of the details.

Another use case is for book operations, so book operations are background jobs, but they handle large amounts of data, both for importing and exporting, so, for queries, it's very useful when you want to export large amounts of data, and if you see here, for the orders, it's a connection, but we are not, we're not limited to, for example, 100 records per page, so, instead of having to paginate and get all the data for all orders, you can split this huge query into smaller pieces and then assemble all the data at the end. So, this way, it's fast and safe to get this kind of huge data export. Fermentations is a bit different. It's very useful when importing large amounts of data, and you can provide all the input fields as a JSON file, and iterate over every line of the JSON file.

Another use case is when generating webhook payloads. So, when you have to deliver a webhook, because some kind of event was triggered, it's very important to have consistency between the payload that you provide on your webhook, and, for example, the data the user expects from the HTTP API. Web assembly. This is very nice. This allow us to execute any code that was provided by the user, and because we have control over how the GraphQL query is executed, you can limit, for example, you can deny any kind of mutations, or you can override any kind of authorization, or anything that you want, so it's very safe to execute untrusted code, and because many languages can compile to WebAssembly, it gives users a lot of flexibility.

Thank you for watching. I hope to answer any questions in our Q&A session, and see you soon. Bye-bye. Thank you.

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

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

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
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 Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
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 Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
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.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
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.
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
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
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.