Building GraphQL APIs on Ethereum

Rate this content
Bookmark

Blockchains are databases with a unique set of properties. Unlike most databases which are optimized for both read and write operations, blockchains are optimized for write operations, typically focused on optimizing and scaling transaction cost, transaction volume, and transaction speed.


In this talk, I'll dive into the web3 space, and show how developers can leverage The Graph Protocol to build performant, scalable, and decentralized GraphQL APIs and dapps on decentralized networks like Ethereum and IPS.

8 min
10 Dec, 2021

AI Generated Video Summary

This Talk is about building GraphQL APIs on top of Ethereum and the Ethereum virtual machine. The graph is an indexing protocol for querying blockchain networks like Ethereum and IPFS. Developers can build APIs called subgraphs to efficiently index data and make it available for querying from frontend applications. The graph serves over 1 billion queries per day and is used in various Web3 applications including DeFi, gaming, and NFT marketplaces. The process involves defining the data model using the GraphQL schema and contract addresses, deploying and testing the subgraph, and using a GraphQL client to query the subgraph.

1. Introduction to Building GraphQL APIs on Ethereum

Short description:

Hello, my name is Nader Dabit. Today I'm going to be speaking about building GraphQL APIs on top of Ethereum and the Ethereum virtual machine. In the traditional web stack, databases, servers, APIs, they filter, sort, paginate, and join data before it's returned to our client applications. The graph is an indexing protocol for querying blockchain networks like Ethereum and IPFS. Developers can build APIs called subgraphs to efficiently index data and make it available for querying from frontend applications. The graph serves over 1 billion queries per day and is used in various Web3 applications including DeFi, gaming, and NFT marketplaces.

Hello, my name is Nader Dabit. I'm a Developer Relations Engineer at Edge and Node. And today I'm going to be speaking about building GraphQL APIs on top of Ethereum, but also the Ethereum virtual machine. You can think of the Ethereum virtual machine, it's kind of like the React of the blockchain world. You learn this one skillset, and you can build not only on the Ethereum blockchain, but any EVM compatible blockchain, meaning a handful of different Ethereum layer twos and side chains, as well as other completely different blockchains like Avalanche, Celo, and many others that are out there.

So with that being said, let's go ahead and get started. So how we interact with and build on top of blockchains is much different than what we're used to in the traditional web. In a blockchain, data isn't stored in a format that can be efficiently or easily consumed directly from other applications or front ends. The problem is that you need to have the data indexed and organized for efficient retrieval. Traditionally, that's the work that's done in the centralized tech stack, but that indexing layer was missing in the Web3 stack.

So in the traditional web stack, databases, servers, APIs, they filter, sort, paginate, and join data before it's returned to our client applications, typically via some type of HTTP request. And these types of data transfer nations are essentially not possible when reading data directly from Ethereum or other blockchains. So in the past, developers and teams would build out and operate their own proprietary indexing servers. But this requires significant hardware and engineering resources, and also broke the important security principles around decentralization. So around the year 2018, the graph began being built to solve this problem. The graph is an indexing protocol for querying blockchain networks like Ethereum and IPFS.

So let's talk about how the graph works. So let's take a look at a couple of other indexing systems that we might be using in the day to day world that we're already used to. So search engines like Google crawl the internet, they index relevant data and they make it available for users like us to search via their web interface or their APIs. And without this indexing layer, it would be kind of hard for us to know where to look for, where to look and how to find relevant information across the web. So you could think of the search engines that we use on a day-to-day basis, kind of like an indexing layer. Another similar analogy is a library. So using an indexing system like the Dewey Decimal system, we know exactly where to find the book that we're looking for without having to go looking book by book throughout the entire library.

Using the graph, developers can build APIs called subgraphs. A subgraph defines how to efficiently index data in a deterministic way and make it available for querying from frontend applications. Subgraphs live in between the blockchain and the UI, providing an important piece of software infrastructure, a flexible, performant and decentralized API layer. Once a subgraph is deployed and the data is indexed, apps can start querying the data without relying on any centralized service provider, and instead they can lean on a query marketplace that's comprised of a decentralized network of indexers, all competing to provide the best service at the best price. Right now the graph serves over 1 billion queries per day, and many types of applications in the Web3 world are using it, including DeFi, gaming, NFT marketplaces, and a handful of other types of applications. So to get started, you would go to thegraph.com, and in the user interface here, you can go ahead and define the subgraph name, along with any other searchable metadata that you'd like to be made available. Next you would use the open source graph CLI tooling to scaffold out a subgraph locally that you can then begin building on.

2. Defining Data Model and Testing Subgraphs

Short description:

Next, define the data model using the GraphQL schema and contract addresses. Deploy the subgraph and test it in the graph dashboard. Use a GraphQL client to query the subgraph like any other GraphQL application. Explore and test other APIs in the Graph Explorer. Test the foundation subgraph that queries the NFT marketplace foundation. Fetch metadata using the content URI and IPFS path. For more information, visit graph.com/docs and github.com/dabit3/building-a-subgraph-workshop. Follow the graph on Twitter at graph protocol and join the Discord.

Next you would define the data model, which is essentially the GraphQL schema, the contract addresses that you would like to have indexed, and any other configurations that you'd like to have set up locally. The GraphQL schema would look like any typical GraphQL schema. The main difference is that we do have a couple of different directives that allow you to interact with the graph network, like, at entity, as well as, at derived from for creating relationships between different data types.

When you're ready to deploy your subgraph, you can then run graph deploy. And then once the deployment is successful, you should be able to start testing it out directly in the graph dashboard. So here we have a graphical editor, we also have a different logs for any errors that might have happened when you deploy your subgraph. And then when you're ready to query, you can just query it like you might have done from any typical applications. So you can use a GraphQL client like Apollo, or Oracle will be giving you the GraphQL endpoint from the graph dashboard. And then you can just run whatever type of query that you would like. And everything should work just like any other GraphQL application that you've probably interacted with in the past.

So with that being said, let's go ahead and go to the graph.com and see what this looks like. So here we are in the Graph Explorer, and you can see that we can view all the other different APIs that other people have deployed. So these are all completely open and public. So if we'd like to view one, we can click on one. And we can see that we can test it out. We can run different queries here and the playground. We can view the graph graphical introspection here. So anything that you would like to know about a subgraph should be available here. But let's go and test one out. So I'm going to go down here to search and I'm going to find the foundation subgraph, which is something that I've created a couple of. And here we can go ahead and test this out. So this is a subgraph that queries the NFT marketplace foundation. And we'll go ahead and just run a query here. We can see that we have all this data coming back. So we have this content URI. This is going to be something that we can fetch and use for finding all the different metadata for an NFT. So here we have the IPFS path. So we can test this out by going to IPFS.io slash IPFS. And here we see that the data is indeed coming back. So if you'd like to learn more, if you'd like to build out a subgraph yourself, I would check out the graph.com slash docs. I would also maybe check out this workshop that I've created at github.com slash dabit3 slash building a subgraph workshop. And if you'd like to learn more about the graph, check out the graph on Twitter at graph protocol, the graph.com, the graph docs or join our Discord. That's it. So thank you for checking out my talk.

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

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
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
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
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