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.

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

FAQ

GraphQL is commonly used as an HTTP API where queries are submitted to an endpoint and a response is received. It involves converting the query and variables into JSON, adding an authorization header, and making a POST request.

No, GraphQL does not depend solely on HTTP requests. It can utilize other data structures and is transport layer agnostic, meaning it can function without a network and is not limited to HTTP as a data transport layer.

Beyond HTTP APIs, GraphQL can be used with WebSockets for real-time communication, in background jobs for tasks like reporting or sending notifications, in bulk operations for handling large data imports or exports, and for generating webhook payloads.

GraphQL can be integrated with WebSockets for real-time or asynchronous communication, allowing queries and mutations to be sent without expecting immediate or ordered responses. This is particularly effective for real-time messaging and handling multiple data transactions concurrently.

Yes, GraphQL can be used for background jobs such as generating reports or sending notifications. For example, a daily sales report can be generated by running a predefined GraphQL query with variables for the start and end of the previous day, with the results used to send an email report.

In large data operations, GraphQL is beneficial for both importing and exporting significant data volumes. For exports, it can split a large query into smaller segments to safely and efficiently assemble the data, while for imports, it can iterate over JSON file lines to process large amounts of input data.

Using GraphQL for webhook payload generation ensures consistency between the payload delivered by the webhook and the data expected from the HTTP API. This consistency is crucial for maintaining reliable and predictable webhooks.

Guilherme Vieira
Guilherme Vieira
8 min
09 Dec, 2021

Comments

Sign in or register to post your comment.
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: GraphQL más allá de las API HTTP

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

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.
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.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
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
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.
Adopting GraphQL in an Enterprise
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
Adopting GraphQL in an Enterprise
Today's Talk is about adopting GraphQL in an enterprise. It discusses the challenges of using REST APIs and the benefits of GraphQL. The Talk explores different approaches to adopting GraphQL, including coexistence with REST APIs. It emphasizes the power of GraphQL and provides tips for successful adoption. Overall, the Talk highlights the advantages of GraphQL in terms of efficiency, collaboration, and control over APIs.

Workshops on related 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
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.
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