GraphQL Query with fetch

[00:00:00]
>> Scott Moss: So basically, there's a couple of things you kinda already talked so much about a lot of stuff, but I'm just gonna go into the stuff that I didn't talk about. Which are just, okay, we kinda know what a query looks like. We talked about how GraphQL is different than rest, but how do you use it?

[00:00:17]
Can we use modern fetching libraries like window.fetch? If you still use things like Axios or things like that, can we use that to do GraphQL? What are we actually sending up to the server? What does that actually look like? Yeah, that's what we're gonna talk about. So like I said, everything's a post, it always has been.

[00:00:37]
And what you're basically sending up to the server is something that looks like this, right? So here's an example of me using fetch to do a GraphQL query. I have my URL, my query is literally just a string. My query does not have a name, so it's like an anonymous query.

[00:00:55]
Here's the query I wanna do, it's a user query. Here are all the fields I wanna use there. And, as you can see, I'm just doing a post request, and I'm just stringifying that query on the body as the field called query, and that's it, that's a GraphQL request.

[00:01:12]
You don't need anything special to actually send GraphQL requests to a GraphQL server, you already know tools is just fetch and you just put your query inside of a string. Now we're not gonna do that, [LAUGH] but this is how you could do it, it's very simple. We're gonna use some tooling on a front end to make it a lot better and simpler and easier for us.

[00:01:32]
But as you can see, it's really not that special. So the one thing I did wanna talk about is, I said that everything is a post request. But the other thing is that everything is also a 200 status code, even errors, well it doesn't care about status codes.

[00:01:50]
In reality status codes are really for machines really if a browser sees a status code to show a specific error. But if you're passing an error, if you wanna indicate some error happened from the back end to the front end, you're probably gonna send some specific message with a code or something anyway.

[00:02:11]
So GraphQL just takes that to another level. So everything's a 200, even if you threw an error or even if some error happened. But what you can do is GraphQL has different fields on it in which you can put certain things. So the result of your query is always gonna be in the data field.

[00:02:25]
If there's an error, there's gonna be an array called errors that have all the error messages, but it's always gonna be a 200. So take that as a grain of salt, all the logic that you've ever written checking for status codes over 300 is pointless now. GraphQL is always gonna be a 200, it's always gonna be a post request, but now you're gonna be checking the payload of the data to see if there was an error.

[00:02:47]
Like, hey, is there a result.errors on here or is there a result.data? You're gonna be looking at that to determine what the error was. And then on the backend, you can send back whatever you want for the error. There are different standards and things that you can pick up or create yourself, but you can just send back whatever JSON you want.

[00:03:03]
And that's how you determine what an error is. So obviously, the downsides of that is that you're no longer gonna get a red error message in Chrome. When you actually get an error on the server, it'll be like, post 200, everything's good. So you're gonna be debugging, you're like, man, I don't know why this isn't showing up on the screen.

[00:03:20]
It got a 200 everything looks good. Well actually go look at the result of that payload, it's a 200, but, it actually says errors inside of it. So that's something to keep in mind is that like, browsers and clients won't respond, to it, because it doesn't know that it has an error, because the status quo is always 200.

[00:03:39]
Unless you are using a GraphQL specific client that knows to look at error pillowed on that result and then would show something, so I thing that is confusing a lot of people in the past, me included. So, important to know.