Creating a Sign Up Mutation

[00:00:00]
>> Scott Moss: Let's get to it. So we're gonna write our first mutation. We didn't talk about mutations, so we're just gonna dive in. But it's very similar to queries. So mutations, what is a mutation? Well, a mutation is like a query. If a query is a read, a mutation is a write, that's basically what it says is you're mutating some state somewhere.

[00:00:23]
And that's the whole purpose. So that's what we're gonna do. So we're gonna write our first mutation. I'm gonna walk you through how I write them. And then you can take from that what you want, or you can just write it from scratch if you want to, but I'm gonna show you how I do it.

[00:00:37]
And I think it's pretty cool. So what we'll do is with your server running, if you go to our app, at least mine is on port 3,000, okay? Yours might also be on port 3,000. But if you go to 3000/API/GraphQL in the browser, you should get an app like this, so load up a whole app for free.

[00:01:08]
>> Scott Moss: And this is where you can explore our GraphQL API. So this is fully functioned, this is connected to your database. So you can actually create users, you can sign in, you can create issues, you can delete, you can do everything that is enabled here on this Back end, it fully works.

[00:01:21]
So this is where I like to experiment with and write the queries that I need from our front end. And then I go and copy them and add them to our front end. It's just so much easier, right? So that's what I'm gonna do. So we need to create a mutation to sign in.

[00:01:38]
Before the Star Wars API, we only had one Root Type we had query, and that was it. Well, here we have query and mutation. There's actually a third one too called subscriptions. We won't talk about those too much, but those are basically web sockets. GraphQL can do web sockets, they're called subscriptions.

[00:01:53]
So I wanna do a mutation cuz I need to create a user. I'm gonna sign someone in, so it must be on mutation. So I'm gonna click plus on that. It's gonna add a mutation here. And then as you can see here, all the available mutations that our API has, again, already built this for us.

[00:02:07]
And which one of these mutations probably makes the most sense for assigning someone in? Probably create a user. So I'm gonna click Create User. And then what I can see here is that I have a non-no argument that I must pass. I know it's non-null because there's an exclamation mark after it.

[00:02:25]
That means you have to include this. So this mutation must take an argument called input and its type must be AuthInput. So what is AuthInput? Let's go see, alt input is an object that has a non-null email and a non-null password. So for me to sign up, I have to pass an argument that has a field called input, that's an object that has an email and a password, right?

[00:02:51]
And then I wanna go ahead and get back the,token and the ID. And then for the input, I'm gonna go ahead and select email and password. It'll add it for me. And then here, I can add an email. So I'm just gonna add email here. I'm admin@admin.com. And then I'm gonna add a password.

[00:03:18]
And if I hit mutation, if I did it right, It'll create a user. It's the same way if you did it on the forum on the main branch. So you can see it created a user. I got back the token. There's a JSON Web Token that gets created that you need to store in the local storage.

[00:03:32]
And here's the ID of the user. And that's a mutation. So just to walk through to connect these dots a little more, because I know I've talked about it before. But I really wanna bring it home with these inputs because I remember learning GraphQL and I quite struggled with this for a while.

[00:03:47]
But it wasn't until I just thought about it as just a regular function argument that it started making sense to me. This is really just an argument placeholder. You can call it whatever you want, but it has to map to the name that you put here, okay? So when I pass up my variables object, which the graphical client is doing for us, it has to map to the name here.

[00:04:12]
So in this case, input is input. It maps those names. So if I wanted to call this a, this has to be called a note.
>> Scott Moss: They have to map, right? And obviously just freaking out because like what's a so there has to be a now as well.

[00:04:26]
Okay, so you can call it whatever you want, but it has to map with the actual input. No, I got rid of my thing. Hold on. We got it back. [INAUDIBLE] And give me that, okay? And then you have to put the type. What is the type of this input?

[00:04:48]
It's the same type that the mutation says it is. It's a non-null AuthInput type. It has to be the same type. Whatever the schema says, that's what this has to be. Has to be the same, okay? And then here, you could think of this as if this is you creating a function and describing what arguments you want, this is you calling a function and passing the arguments in.

[00:05:13]
That's the difference. I'm creating a function, which means I can call these arguments whatever the hell I want. And here's the type for it. And here on this next line, I'm calling a function and now I'm passing the argument in as a value to this function, right? This is type check.

[00:05:30]
This has to be called input because that's what it's called here. It's called input. And its value must be off input. Well, guess what has an off input value? This variable here, dollar input has all the input values, so I'm just gonna pass it in here. So the only two things that have to be the same are the name of this thing and the name of this thing, that's it.

[00:05:52]
These dollar variables can be wherever the hell you want, as long as the same and your variables.
>> Scott Moss: That's it, there's really nothing else to inputs other than you can use them in many, many different places.
>> Scott Moss: I could create another user here, or yeah you could do more than one mutation by the way in one mutation, it gets crazy you could do a lot of stuff here.

[00:06:20]
So I can make more than one create user call inside of one mutation, and it'll do it, but you're not doing that. Cool, any questions on that?
>> Scott Moss: No, okay, so now that I have that, I'm just gonna copy this mutation. I'm just gonna do this. I'm gonna say, cool.

[00:06:39]
I'm gonna copy that mutations, right? Mouse, let's copy that. If, we go back to the notes, there's gonna be a GQL folder on our root. And for every single query or mutation that we create, we're gonna put in his own file. There's just something that I do like to keep them separate.

[00:06:55]
Keep them that way, and then we're going to paste in what we just copied. Or if you wanna write it from scratch, you can write from scratch. We're gonna put that in there and we're gonna export it. So let's do that. So for our sign in mutation, or actually the one I just made was sign up so I'm gonna do the sign up one first.

[00:07:11]
So I'm gonna grab the sign up mutation, I'll put it in there, and I'm gonna do the same thing for the sign in mutation. So we go down, there should be a GQL folder, if not just make it, let me see. I guess I just deleted the whole folder which makes sense for clients.

[00:07:25]
So on the route, just make a new folder, call it GQL, like that. If you got some icons it'll show well Graph QL icon there. And then I'm gonna make my sign up mutation.ts. It's not JSX I don't have to do TSX or JSX. It's just a TypeScript file.

[00:07:49]
And then I'm going to import from Oracle. I think it's Oracle next maybe. Let's see. Yeah, I'll import GQL. GQL allows us to do something called a template tag. Well, it's hard to describe it a template tag does, but it's basically like a function that takes a string and interpolates on it.

[00:08:11]
And we don't have to use this, you can actually just use a regular string, and it works just fine. But this array here will convert your string into what's called a GraphQL document, basically some objects that we can pass to the query. It's just another level of abstraction.

[00:08:27]
People do this because sometimes they need to operate on a query and do things with it, transform it. There's things like code highlight, it's just a lot better because you don't have to do it. We're gonna do it. So I'm gonna make my sign up mutation like this.

[00:08:49]
Wait, no, I'm not doing it. I wanna make sure I keep the same. Okay, yeah, all right. So I'm just gonna do GQL. We're gonna do that. I like to go to the next line. I'm just gonna paste this here. I don't know what plugin is telling me to execute this mutation, but it's not gonna work.

[00:09:03]
And I don't know what that is. But it's cool. It's a good thought, but I'm pretty sure it does nothing. So all you have to set up, but we got that and then I'm just going to guess I'll just export this as a name variable. That way I don't have to rename it and have name conflicts when I import it.

[00:09:27]
>> Scott Moss: Okay, so we have our sign-up mutation. We'll bring this over to our sign-up file. We'll try to sign up. We'll get that working. Then we'll come back and make our sign-in mutation, and we'll try to sign in, and we'll get that working. So, let's do that. And at minimum, you need token.

[00:09:44]
You need token here. If you don't have token here, there's gonna be problems. You don't really need the ID of not doing anything with it so I could just get rid of it, but you definitely need the token. Cuz we need to save the token in the local storage when you sign up, otherwise, we can't make any requests out of that.