GraphQL Schema in Fauna

[00:00:00]
>> Now that we've got this set up, we're going to define our database schema. Because it's a to-do app, we're gonna keep the surface area pretty small. So what I'm gonna do here is, I'm going to create, I'm just gonna put it inside the functions folder. I don't know if that's really a best practice, but it seemed right to me because this is where all the stuff is gonna happen.

[00:00:26]
So I'm creating a utils folder inside of functions. And inside of that, I'm gonna create todos.gql for a GraphQL. I'll just leave that up for a second so you can see it. So inside of this, we're gonna define a GraphQL schema. And so GraphQL has a couple top-level types.

[00:00:49]
We're gonna specifically deal with queries and mutations today. The query is what we need to define, because we wanna be able to get all the to-dos. But Fauna will handle the rest of it for us, so we don't have to do that. Again, I was talking about all that CRUD boilerplate so that you can do create, write, update, delete, that is a huge amount of work.

[00:01:11]
And more and more services, Fauna's one of them, Prisma's another one, they're doing a really good job of just taking that stuff away, and making it easier for us to set up things. So I'm gonna define a Todo type, and I do that by using the keyword type.

[00:01:28]
And inside of it, I'm gonna define my fields. So I want to have a text field, and that's gonna be a String. In GraphQL, types are capitalized, so a String is gonna be capitalized. And then I want it to be required, so I'm gonna add an exclamation point.

[00:01:47]
And that means that it's a required type now. And then I'm also going to track whether or not it's completed, and that's gonna be a Boolean. And that's not required, so that could be null, potentially. I mean, it shouldn't be, but it's not gonna hurt anything. So that is our whole type, that's the whole thing that we're gonna do.

[00:02:07]
And then we're gonna define a query so that we can read out our Todos. So I'm gonna define a query type, and in it, I'm gonna say, we want allTodos. And this is gonna return an array of Todo items. And if it comes back, it needs to be a Todo, it can't be null.

[00:02:26]
It can be empty, we can get an empty array back, but it can't be null. And that's an important distinction, so you can get an empty set, but you can't get an invalid set. So now that we've done this, this is it, this is our whole database, we're basically done with the setup.

[00:02:43]
So over here, I'm gonna make this bigger so it's not collapsed, we've got a GraphQL button. So I'm gonna click this GraphQL button, and then I want to update the schema. So I'm gonna be able to click this Update Schema button, and then I can go into my frontendmasters/jamstack-intro/sections/todos, and here's that todos.gql.

[00:03:10]
So I'm gonna open that, And it's now created our schema, we have a valid GraphQL schema. And I'm able to then look at that, and I can see, here's all to-dos that we created, here is the createTodo, update, delete. So we've got the ability now to create, read, update, and delete, it did all the CRUD for us.

[00:03:38]
So if I start this, if I go in and I want to write a query, so I'll use the query keyword, say allTodos. And inside of this, I wanna see what we can get. So let's just click through the docs here, make this a little bigger so we can see.

[00:03:53]
Inside of it, it's going to give me back a to-do page, and that's got data, so let's get that data. And then inside my data, I can get what the text is, and whether or not it's completed, and an ID, so let's get that too. I want the ID, I want the text, and I want whether it's completed.

[00:04:18]
Okay, so that came back empty, that's okay, we don't have any to-dos defined yet. So let's define one, and rather than having to get rid of this, I'm just gonna start a new tab by hitting this plus button up here. Does anybody need more time with this query, you all good, okay.

[00:04:38]
So if I want to create something, I'm gonna use a mutation because we're mutating our database. So then I can get back into my docs, and I can look at the mutations, and here's the createTodo. And that's gonna accept some data, so let's get that createTodo, and that gives the data that we wanna add.

[00:04:59]
And then I'm gonna show you a shortcut that I really like, which is that I can hit Option+Space to see what's available as well, without having to look at the docs. So my text is, let's say, we're gonna learn Fauna. And for completed, we're gonna say that it is not completed.

[00:05:20]
Can I make this bigger, there we go. And then what I want to come back is just whatever we created. So let's get the completed and the ID and the text. And so what we're saying is, we want you to create a new Todo with this value. And then after you've created that Todo, return these details about that Todo.

[00:05:39]
GraphQL kind of handles this process for us so that we don't have to send two queries. We're not saying, send this mutation, and then afterward, I have to run a query so that I can get the updated thing. We were able to kinda pull that all together. So let's just create one, we'll set that up.

[00:06:02]
Okay, so we've created a Todo, and now if I go back to my allTodos, It shows up if I run that query. So we have, with a couple lines of code here, set up a fully functional database where we can create and remove items. I'm not gonna delete one because I don't wanna have to go through the creation process again, but we can just delete it by its ID.

[00:06:29]
So that means that we are ready to actually start writing an app with this database. That's all the boilerplate setup that we need to do, so let's go ahead and-
>> In Fauna, they set up all those mutations for you?
>> Yeah, yeah, they handle all that for us, which is really, really nice.

[00:06:49]
So let's save our work, and then we'll get started with the actual app part of this. And let's see, setup, Okay, let's push that up.