Building GraphQL APIs on top of Ethereum with The Graph

Rate this content
Bookmark

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.

Nader Dabit
Nader Dabit
48 min
13 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This workshop focuses on building a GraphQL API on top of the Ethereum blockchain, using the Graph Protocol. The Graph provides a decentralized approach to data querying and storage, allowing developers to build decentralized APIs that read and index blockchain data. The workshop covers topics such as creating subgraphs, defining data models, handling events, and deploying and querying the subgraph. Participants learn how to interact with smart contracts and the Graph Node, and how to customize queries to retrieve specific information.

Available in Español

1. Introduction to Building a GraphQL API on Ethereum

Short description:

This workshop focuses on building a GraphQL API on top of the Ethereum blockchain. It explores the relevance of blockchain technology in various industries and offers opportunities for learning and growth. The workshop is divided into two parts: a presentation and a hands-on workshop using a GitHub repository. The speaker, Nader Dhabat, introduces Edge and Node, a blockchain startup behind the Graph Protocol. The Graph is an indexing protocol for querying blockchain networks. It provides a decentralized approach to data querying and storage, unlike traditional databases.

Cool. So, yeah, this is going to be a workshop where we are building out a GraphQL API on top of a blockchain network, and the network that we're going to be building on top of is Ethereum. And this is probably going to be outside of the ballpark of most of the talks or the workshops given here. It's definitely a lot different than anything I had ever done when I started learning this stuff. But I think that it's becoming more and more relevant, I guess, with the emergence of a lot of the different jobs and opportunities that are out there.

And it's kind of like maybe a new area just to explore that to maybe accompany all of the existing knowledge that you have around GraphQL and how it might be used. So if you're interested in exploring opportunities in the blockchain space, or the Web3 space, or even with a lot of the traditional companies like Stripe, PayPal, and Meta and all these companies adding blockchain stuff, this might become relevant to our everyday day to day jobs, who knows. But with that being said, this is gonna be broken up into two parts. So I'm going to be giving a presentation. And I'm also going to be doing a workshop and the workshop I shared in the chat earlier. So you should see a link to that. It's a GitHub repo that we're going to be following. And this is it right here. Zoom in a little bit here.

Cool. So my name is Nader Dhabat. I'm a developer relations engineer at Edge and Node. Edge and Node is a blockchain startup that was created by the team behind the Graph Protocol, which is what we're going to be talking about today. And we do a lot of different things. We do support this protocol from the perspective of us being software engineers that build out and maintain the infrastructure for this protocol. We also do Web 3 tooling. We do Web 3 open source. We're creating a couple of Web 3 applications that are going to be open source. We also do Web 3 awareness and venture capital. So one of the things that I do a lot is just teaching people how to build stuff and sharing reference architectures and stuff like that.

So the Graph is what we're going to be using. And it's one of the many Web 3 web infrastructure protocols that are out there. And it is an indexing protocol for querying blockchain networks like Ethereum and IPFS. So what does that actually mean? Well, when we think of traditional databases, they are created and are built to be made in an efficient manner for us to query and to save data too. So a traditional database like a SQL or NoSQL database, there are no constraints around decentralization.

2. Introduction to Reading Blockchain Data

Short description:

In a blockchain, data is written over time in blocks, and innovation focuses on write transactions. However, reading this data is often overlooked. Developers used to build centralized indexing servers to gather and store blockchain data, but this approach was resource-intensive and centralized. The Graph indexing protocol solves this problem by allowing developers to build decentralized APIs that read and index blockchain data. Examples of indexers in real life include search engines like Google and libraries that use indexing systems to organize and retrieve information. Subgraphs, which sit between smart contracts and user interfaces, enable developers to query and fetch different types of data for their applications.

So we know this is going to be our data so we can store and we can optimize for read and write. But in a blockchain, the nature of it is that we have this data that's being written over the course of time, you know, days, weeks, months and years, and it's being written in these blocks. So all of the innovation is typically happening around write transactions. So when you hear about a lot of the innovation that is happening, you often hear discussions around how many transactions per second does this protocol handle? How much does the transaction cost? How long does the transaction take to be processed? What is the block time and things like that? But we don't hear often talked about how to read all of this data.

So what developers did in the past was that they would take these blockchain protocols, they would decide the data that they needed, and they would build out their own proprietary centralized indexing servers where you kind of are going and you're gathering all this data, you're saving in a database and you're opening up your own API endpoint on top of that. The problem around this was that it was very resource and engineering intensive and it also kind of broke the entire idea and the security principles around decentralization, because the blockchain data is supposed to be the source of truth. So how do you actually make this decentralized? If you're centralizing in a database to kind of read it? So the graph is an indexing protocol that allows developers to build these APIs that kind of read all this data, indexes it in a decentralized manner. And appear to peer network of nodes. And then developers, once they've deployed, those can open up their API endpoints for any other developer to build out front end or other applications on top of it.

So to kind of explain that a little more again, a traditional database might look something like this where we kind of have a database, we have built an API endpoint on top of that, maybe a serverless function or some type of server. We're going to be sending a request to this API. It's going to then read the data. It's going to then process that maybe in a return. And then it's going to bring that response back to the client. But again, we can't really do this when reading data directly from the chain, because the chain is kind of thought of as the database. So we don't really have this this compute layer in the blockchain space. So what are some other examples of indexers and real life? Well, Google or any search engine is an indexer. When we want to find information on the web, we can't just go and view all the websites because there's millions of websites that are out there. So how do we find the information that we need? Well, Google and other search engines have this idea of a indexing system where they crawl the entire Internet. They find the relevant data. They store it in their own centralized databases. And then they open up an API endpoint on top of that, either via some actual API that we can interact with from an application, or in the case of Google, we just have like a website that we can visit. And when we enter a term into the website, it's going to their databases and it's kind of searching what we're looking for. And then it returns with the connection to the website that we would like to view. So Google is indexing and making it available for querying by us on the front end. Another example is a library. So when we go to a library, we don't walk around the entire library for four hours looking for the book that we want. There's an indexing system where the Dewey decimal system or something like that might tell us exactly where to look for a book. And then we can go directly and we can just find that book. So in a similar sense, these APIs called sub graphs sit in between the smart contract and the user interface and allow developers to query and have different types of data fetching that you might need for your typical application. So you have these different types of, um, I guess you could say queries that you might hit your app with.

Watch more workshops on topic

Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
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.
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.
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!
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.
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
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.
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'.