Intro to Building on The Graph and Hypergraph I Marcus Rein

[Music] How's it going? Uh, welcome to another ETH global. See some familiar faces. Welcome to Intro to Building on the Graph and Hyperraph. I'm Marcus Rain, senior developer relations at Edge and Node.

We're one of the core development teams working on building the graph. So today uh the agenda we're going to go into an intro on the graph for those of you who don't know. We're going to go over the graph prizes. We're going to talk about Hyperraph which is our new full stack app building product. And then we're going to go into the demo of Hyperraph.

So what is the graph? The graph is a decentralized indexing and querying protocol. If you need blockchain data, we have many products to get you blockchain data. And here's some stats about us. Uh, one of the big ones is we have 100 plus indexers on the graph network, which is our decentralized indexing and querying network.

So, uh, today we're offering $10,000 in prizes and we're going to go into all the different ways that if you are hacking, you're able to win some of these prizes today. Here are the different prize tracks. The first one, best application built on token API, substreams, subgraphs, and our MCPS. There's $3,000 for first prize, 2,000 for second. Best application built on hyperraph.

That's what we're talking about today. First prize is 2500 and second prize is $1.5k. And the third track, best use of the GRC20 TS library. First price uh is $1,000.

The GRC20TS library is the foundation to Hyperraph. We're going to be talking a lot about Hyperraph and its database and the style of its database. GRC20 is the spec beneath Hyperraph. So, if you want to use the framework, that's Hypergraph. GRC20TTS is the spec beneath it.

All right, we'll talk more about that in a little bit. If you are planning to hack towards any of any of these prices, uh, go ahead and scan this QR code. This has docs, this has videos, this has repos, this has quick starts, this has everything you might need to get going ASAP. So, you could win some ETH Global Prize money. So, I'll wait till phones are down and uh we'll keep on going.

There's going to be a little bit more QRing in a little bit, but uh minimal QRing, I promise. Okay, got it. On the way. Kind of wants, doesn't want to. It's okay.

I'll uh I'll get you the link later. Okay. Okay. So, uh one last thing, everyone who builds on Hyperraph and submits their project gets an air tag. So, one little thing to sweeten the deal.

That's always fun. Um, and let's go ahead and talk about Hyperraph. What is Hyperraph? Hypergraph is a local first framework for web3 consumer apps. Who here loves them some DeFi apps?

All right. Who wants some more variation in their DeFi apps? That'd be nice, right? Something a little bit different. That's what Hyperraph is aiming to do.

It's aiming to provide a new way to interact with data that's not only just yours but someone else's and have that data be composable at scale and that's hyperraph from a super high level. If you want to go ahead and get that quick start that's that QR code there. That's what we're going to be doing later uh today specific to Hypergraph. And so promise last QR code I think I think the last QR code. Um but yes and last thing I'll say here is this is developer preview.

If you are pushing this to production, wait. That's all I'll say. This is developer preview. Feel free to build. Feel free to have fun.

Learn the principles. Learn the fundamentals. Uh, this will be production ready in time. This is meant for hackathon right now. Eventually, it'll be ready for full production.

Cool. Phones are down. A few of the hyperraph features. Let's go a little bit deeper. Privacy is a feature.

All right. Anyone tries to build an app, privacy is nice to provide the uh uh users of your app. Local first. If you're building locally on your computer, it'd be nice to have that be the location of your development. And then anything you actually push, that's actually secondary.

It stays local and it's fast. Full stack, it's able to have the front end and the back end combined. Uh it's end to end encrypted, that's baked in. Security is in there. And then O is already baked in.

This is a full stack framework. And we mean it. All right. You're actually able to build really fast uh with this framework. Now let's back up a little bit from hyperraph just for one slide.

Who here has worked with knowledge graphs? Just worked with them or at least knows what they are. Does anyone not know what a knowledge graph is? It's kind of like mixed bag. Okay, cool.

A knowledge graph is a style of a database. All right, it's a way of looking and and uh storing data in a database. The two hallmark factors of a knowledge graph are standardized IDs and relationships are actual data. Let me go into that a little bit. If you have two different databases and they have two different styles of using IDs, to actually compose them is a complete headache.

It's very difficult. But if you could have a standardized way of actually using IDs and then actually uh uh sharing that data in a a functional way, you have composability potential and that's what standardized ids unlock. Finally, relationships are data. If I was to say San Francisco is inside of North America is inside is the relationship. It actually provides context and that's real data.

When you're saying something is inside of something else, that's real information. And knowledge graphs make that relationship a first class citizen as opposed to other different database styles where it's just linking two different entities. This is actually saying the relationships are true data. Okay, that's there's many more things about knowledge graphs, but we'll just keep it real simple right there. Um so let's dive back into hyperraph.

How does hyperraph use knowledge graphs? How does it take advantage of all of these these different features? Well, it first starts with the concept of spaces. Spaces are what unlocks private and public data. Some data is nice if it's public.

If we have software as an entity that is a that is actually a space, you have entities in there that could be public data. That's fine. But if we have personal notes, it would be nice if that was private. Now the first concept I want to get through with hyperraph is spaces could be public and spaces could be private. That already is something new in web 3 where in a framework we have the idea of saying well everything is public at all times.

Well the public and and and consumers might not like that. They do like some privacy and having that baked in as a tool as developers that you could use privacy to offer your customers that would be pretty nice. All right so that's one of the nice things about hyperraph to start with. What do you fill in these spaces? Well, you fill in entities.

You put entities into these spaces, into these public spaces or private spaces. Now, entities in a knowledge graph, you have a normal entity here, just could be any concept, any data point, a normal entity here, and in between there's a relationship entity. That's what's unique about knowledge graphs. We'll go a little bit more into entities, but just know that's the unique part. That relationship in the middle creates knowledge.

That relationship in the middle is actually what makes this stuff uh really special. So, before I go on, any questions so far? So that was like a highle overview of knowledge graphs and how hyperraph is stepping into the into the framework. We're good. We're good.

Okay. Now this might seem like a lot because it is. Um and to synchronize all of this is difficult. If I have a certain part of the knowledge graph that I'm building and I'm building my little database in there and someone else in this room also has theirs, we're going to have to potentially sync our IDs because standardized IDs is a big part of a knowledge graph. And here we've taken care of that.

There's actually a sync server in there and that makes sure that on my local computer I have the option to standardize my local entities with whatever is on the knowledge graph. And if I can do that, I've unlocked composability between my local database, my local machine, and the knowledge graph at large. And we're actually going to look with see what that looks like real soon. So let's go ahead and go into a live demo. Uh that's the same QR code as the quick start if you missed that before.

Um, but we're just going to go through uh CRUD on entities in a public space and in a private space and just contextually what that means. This will help you get started really fast with hyperraph. All right. So to get started uh we do npx create hyperraph at latest and let's make sure everyone can see that. Yes, they can.

And we're just going to go ahead and fill in the default all the way through just so we can actually go ahead and start building. And good job, ETH Global with internet. Yes, big fan of the the internet uh stability this time. It's really good. And we're going to let this finish through.

Any questions while this is spinning up? No. Okay, cool. All right, we'll go in and spin up the template. So this is just basically we're going to look at what the front end presents in this template.

Welcome to hyperraph your web3 app template powered by hyperraph. So we talked a lot about spaces and that's the first concept I want to get through here in a knowledge graph when it's a public space. It's truly public. You don't have to log in to get that data. It's available to everyone.

It's a public good. Let's go ahead and look at explore public knowledge. And in this location we are in a public space. We are in crypto. that is a public space in the knowledge graph and it has an ID remember standardized ids that's a big deal with knowledge graphs so we're trying to be good with uh keeping that clear here now inside of this space there's a few different entities there's project entities there's DApp entities there's investment round entities assets let's just focus on projects all right let's just focus on okay we have project entities and they are uh filling up this uh very nicely let's see how knowledger graph is doing this under the hood.

Let's go to the code and see how this template might be doing this. And as with data, the actual location from where you are getting the data is important. We're going to start with the schema.ts. That is the shape of our data.

And then we're going to have the mapping that connects to the knowledge graph that makes sure our local computer is able to actually communicate well to the knowledge graph. And then we're going to have routes which actually has that data going to the front end. So how does this happen? How does projects populate from the knowledge graph? Well, first things first, we need a definition of the shape of our data.

We have a project entity. And in this entity, we're getting a name, description, the X website, uh the X uh uh site there, and the avatar. And we can see in every one of these, we're pretty much getting those. Sometimes in the data set, it's not populating view on X because maybe that piece of data, maybe that project doesn't didn't have that written. It's a knowledge graph, so it's not going to be in there.

And we see right there uh when the X is type optional that allows us to say hey if it's not in there still let the front end run. If this type optional was not there it would bonk and it would not actually go through. Now wouldn't it be nice to wonder say hey what else is out there on the knowledge graph because typically when we're developing it's local. We're thinking all right what's our local database doing? But this is where it gets a little different.

We can wonder all right this is what our local uh uh database has. It's bringing in name description X avatar. Cool. What else is out there on the knowledge graph? And I'm glad you asked.

Let's go ahead and find out. If we go to the quick start and we actually check out the schema, we have the hyperraph schema browser. This allows us to look at all the schemas that are being used out there uh regularly in the knowledge graph that hyperraph is using. If we type in project, we can see right there, this is a entity that has maybe another property that we might be able to use. If we see right here, it has website.

If we look back here, this does not have website and this does. So, we can go through and actually populate our front end with this data being pulled down from the knowledge graph. Let's just add website right here. And we'll let that fill in. And let's go ahead and say, all right, we've pulled that in.

Let's make sure our local database is actually mapping correctly to the knowledge graph database that's being synced by the sync server. So, we're in the mapping right here. And guess what? So we got project and all we got to do very simply is type in website and then ID. Now it autopop populated that.

Don't fully trust that because we need to make sure the ids are uh standardized and this website property also has its own ID. There's ids everywhere. There's IDs for projects. There's IDs for spaces. That's a big feature of knowledger graphs.

Let's go back here and see what the website ID is. It's the EED right there. And if we do that, this project's local entity now can be composed with anyone else that's using this exact entity right there. So if anyone else is building on the knowledge graph in their local database and makes the data public, we can go ahead and compose. Isn't that cool?

So let's go ahead and go back to projects and say if we want to populate that, let's just go to the bottom and where is it? Right here. project dot id project name project x and d and then project website. Okay, so if it does in fact have the website, it should show right there and there. Pulled it in automatically.

There's nothing else to do that pulled that in from the knowledge graph remotely. Cool. So we know how to read. Okay, we know how to read from the knowledge graph. How do we create entities in the knowledge graph?

So let's go to the C part of that uh formula. And if we want to create new knowledge uh on the knowledge graph, that's really nice. We can totally do that. That's actually baked into this concept. We have spaces right here.

Now, if we want to create, we can't exactly just write to public knowledge because someone else owns this data set right here. We have to do a request for that. We're not going to get into that. We're going to go ahead and write to our own private space. That's because we have permissions for that.

So we'll go to sign in and com and we'll get the confirmation code to pay anything to write.

No,

great question.

You don't need to any wallets or whatsoever, right?

Not now. Nope. Nope. Okay. So we sign the wallets are all in privy.

So that's nice.

So if I want to write and make it easier for the users, I can just abstract it into the back end so they don't have to do anything.

All of this is the hyperraph framework. If you want to go lower level and use the GRC20 SDK, you can totally play with knowledge graphs with your own customizability. This is all baked in meant to, you know, be faster. But yes, if you want to get more aggressive and more creative, the SDK is for you right there. Yeah.

And then let's create some spaces. All right. So we'll call it Marcus' private space and we'll call it Marcus' public space. Okay. So we have a private space and we have a public space and they're both owned by me.

So I can crud all I want to these private and public spaces that are owned by me. Very good. We check both of these boxes and we authenticate and redirect into the app. There we go. There we go.

So, if we go back up to my spaces, there they are. My private space and my public space. So, I have all the power in the world to say, "Hey, I want to add some data here. I want to go ahead and make sure this is maybe a private note or something I want to keep to myself." Well, right now, we're in this uh uh template that we're just demoing.

We're just creating a new project entity. That's all we're doing right here. We're just creating a project entity here. And we'll call this project one. and we'll say project one's description description and we'll create the project entity and once again ids are everywhere so this has the ID and how did that happen let's go into the code and just look at the uh this is the space ID we're in the private space so any space ID uh any space that is created that is private is going to be using this dynamic uh uh website address and then all we use is this little hook which is use create entity.

We have hooks everywhere baked in that you just simply populate the data and there's going to be an ID for sure in there. Uh and then when you're ready to actually use the next hook, you'll publish to a public space. And that's what this next hook does. So all this does is that hook uh hooks up to that button and we publish whatever that data is to the public space and we can see it's right there. All right, it wasn't there before.

I should have probably shown that was blank, but anyways. Um that's essentially the flow. All right, you're able to create and read. Right now, in terms of updating and deleting, there's a few other hooks. It is uh use update uh entity and then use delete entity.

And it's really quick to modify uh in the knowledge graph from the front end. I'm interacting from the front end dynamically and it's syncing all the time as opposed to having to go to the back end, go to the front end. You're always interacting with React, you're always interacting with the front end and you're able to build dynamically. Um, and then if anyone else of course publishes data to the knowledge graph and they make it public and you have the same ID, you have essentially a big old shared database that has permissions and potentially fine well not potentially it will have fine grained off soon. Right now it's just public private but you have a front end that you can create based on a composable data set.

Uh that is a whole new concept. So you could have of course blockchain data coming in uh from subg graph substreams and all of the different blockchain data uh services that we have and then non-financial data just regular data coming in into the knowledge graph and creates new apps that is not just defi it's not just web 2 this is something new so um let's go back to the slides and let's talk about a few examples and ideas crypto projects directory investment graph a DAP registry, a DAO governance explorer. I think those are good places to start. If anyone would like to have some ideas, feel free to come by the booth and talk through these ideas. I'm more than happy to go into those a little bit more.

And uh lastly, once again, we got I promise no more QR codes. I lied. We have one more QR code. Uh these are the Hyperraph docs and they will help you get started very quickly in building. We'll be at the booth uh of course today, tomorrow, and on Sunday.

build with Hyperraph. Plug in data that's uh DeFi data that's blockchain data. Plug in data that's not that's non-financial data and learn the concepts of Hyperraph and build something new. So, thank you so much for your time. I'm here for questions.

[Applause] Yeah.

Is that so that only exists locally and so is the like the the application itself responsible for persisting that it needs to

Good question. It goes to the sync server um but it's end to end encrypted. So if you're creating it locally and it goes to that sync server that's also encrypted there. The server cannot read anything. It does sync there.

So

also

yes it's just in a space that is fully encrypted. So when you close your app like reopen it again later then how is that authentication?

That's with the geoconnect. Remember I did that privy login right there. So if you

okay that's okay. Yep. Has there's a there's a geo connect feature that allows for logging in. Yeah.

Yep.

So if I if I wanted to use like the graph to store like private data like

abstract the the geo connect for the users and just create that app with private data. I could use like API key or something to access it.

Um, so I mean essentially the the GRC20 SDK is our spec of the knowledge graph that was pushed by the team here. We've got some of the builders right here that are building that GRC 20 spec and that uh style of knowledge graph. That's the lowest level that we have for a availability. If you want to go ahead and connect whatever wallet you'd like to that, I believe that's possible right now at this point. Yes.

Yes. Okay. [Music]

Are smart contracts and these smart contracts have permissions for who is allowed to write data to these smart contracts. And so if you want the same account to work on your back end as what's they're using to publish data to the smart contracts, you'll have to go through geoc. The way geoconnect works is we generate smart sessions uh that are attached to the smart account wallet. modules and so that's why you're able to do more space by space permissions. So you have to integrate that on your back end to make sure that you have the same session available so that you get the right smart contracts

you say on chain but where is store what

private data it's not on chain at all what we do is we use your like key there to to derive your encryption decryption keys So that's how usey to connect and then from there uh you can basically decrypt the data. So the way that sync is through the sync server so it doesn't go on chain at all when it's private. It's using CRDT and we could have done a peerto-peer CRD thing but then you have the issue of like if you're not all online at the same time it's a bad UX. So that's why we thought having a sync server is a nice tasteful tradeoff. It's better UX.

So as long as that thing's available, if anyone connects who's part of that space, they'll get the updates. Um, so you have the real time collaboration. So that's just through that sync service. It's not actually chain until or unless you decide to publish it to a public space.

Yeah.

So where is the fraud being or

Yeah, that's the think server. That is the sync server. So that's that's what we're running right now and it is what we are operating. Over time when this gets more mature, it is I mean it's open source so anyone can run that sync server and it can become decentralized. Yeah.

Yeah. Yeah.

Is there a way to verify the data? Suppose you have a public

uh not currently. Uh there's not verifiability baked in. Uh is there any uh plans for for anything like that?

When you say like to verify I mean so right now you know you publish the knowledge to IPFS and then you anchor it on chain.

Um so And then like for for the data itself um there's kind of like governance things that we're going to be like sharing more governance of that data

but at the moment is there an option to

Yeah. So that's kind of for the public spaces with governance which is available but it's kind of it's it's a geo feature.

Yep.

Yep. And one thing I'll I'll add to this also is if you're looking for more spaces to dive into those data sets. Go to testnet.goer.io and you can go ahead and start browsing around and seeing what other spaces there are.

Like if I just click on crypto right there. Uh we are in the same space the B uh25. This is a space ID right there. And we were in the crypto space as well uh earlier. I think it was projects and we can see there it is the B uh 25 right there.

So this is the same space we're in in programmatically as the test net. So go ahead and browse around and look at all the different data sets and come up with something cool.

The San Francisco space might be cool to show.

Yeah, let's do that. That would be

just go back.

It's back. There it is.

Yeah. So, this has another space ID. This is public space with public data and lots of information that you could tab through and build.

Restaurant.

There it is. Trending restaurants.

Yeah. So, anyways, um we're good. Good on time. Okay. Thank you so much for your time everybody.

Uh uh one was that okay

okay one more question. Yeah.

Yeah. Could you mention like censorship

censorship?

Sure.

Database.

Sure. Yeah. I mean the data is on IPFS. Uh so we're using that for for public data. Um and in terms of that uh the sync server that is going to be contained at this time are we?

Yeah.

And the sync server is just for your private space.

Yeah. It's private data.

Public stuff you're publishing that to a blockchain.

It's Yeah, it it's publicain. Yeah, same thing. Okay. All right. Awesome.

Thank you guys. Thank you so much. [Music]