Querying Data Exercise

[00:00:00]
>> Scott Moss: You're gonna be using the useQuery hook here. And basically, the way you useQuery hook is gonna work is pretty simple, so you're gonna do something like this. UseQuery is gonna give back an array, cuz it's a hook, and then, you're gonna use something like useQuery here. But useQuery, it's argument that it's gonna take, it's gonna take a graph to query.

[00:00:26]
So you need to write a graphical query that's going to allow you to get the pets. So how do you know how to do that? Well, if you go to where's our client? Cool, let me put our actual API back in here. Which was http local hosts. I think mine was 4,000.

[00:00:50]
Yours should be 4,000 to for that. So if you do that and we wanted to look at the queries. You can just go to GraphQL playground. Where is that? There it is. You can go to GraphQL playground and type in your URL. But you can also just go to your DevTools here.

[00:01:07]
There we go. I think I stopped my server. Yeah, there it is. Let me just copy that. There we go. [SOUND] I gotta get rid of that query at the bottom, it's actually breaking it. That's what it is. Get rid of this thing. It's like you don't have that on your server, cuz I don't.

[00:01:32]
>> Scott Moss: Cool, so then, if you go to your DevTools, if you download the Dev Tools. Let me refresh that to get it to kick up. Okay, something is breaking. I spelled local host wrong, Jesus. Localhost, there we go.
>> Scott Moss: All right, go back to your DevTools, refresh this.

[00:01:55]
And this is basically, you can see right here, this says, GraphiQL. So I told you about GraphiQL, which is basically the first version of Playground. You have GraphiQL built in right here. So you can explore your schema. So right here, if I click on query, you can see, here's all the queries that we can do against of API.

[00:02:12]
So we wanna run a pets query to get all the pets to display on this page. And it takes an optional argument. You can use the argument if you want or not, but we'll get to that. But for now, you just wanna run the pets query. So you can just come in here and just test it right quick.

[00:02:26]
You say cool, what does that look like? So if I run the pets query, what do pets look like? Well, they have a name? Always get that ID and have an image. So if you run that, you can see we get zero pets back, because there are no pets in the database, cuz we haven't created any yet.

[00:02:43]
So you can wait till we get to the point where you create some, or you can go into the database and make some yourself, and I'll show you how to do that. But, at least, you're getting back an empty array, which is no pets. So that's how you know your query works.

[00:02:54]
So this is a great place to go and test client-side queries against a server that your client is hooked up to. And then, you could literally just go from here. You can copy and paste it in your code, and you've got the query working. Just remember, you need to create an operation name.

[00:03:09]
So this is the shorthand method of creating a query. But you really wanna create an operation name here. So Apollo cash can take advantage of that operation and save it inside of the cache. Underneath the operation name, right now, there's nothing in a cache, cuz we didn't execute a query yet.

[00:03:24]
But once they execute a query, you'll see the nodes in the cache. You also see the queries by their name in the cache, as well. So make sure you add operation in there. So we wanna do the pets query with an operation name. And we wanna do it inside of the pets file here.

[00:03:40]
So in order to do that, you would do something called used query. So if I were to make a query here, I'm not even gonna make a real ones, cuz I want you to do it. It's gonna call it a query. And you're gonna use the graphiQL tag, just like we've done in the other example.

[00:03:57]
And you're gonna issue your query. So you go to operation name, name. And then, you give it a query, whatever your query is. In this case, you should be using pets. And you get some fields here, like that. Once you have your query, you can pass it into useQuery, or like this, query, and then, use query's gonna give back a couple things in this array.

[00:04:27]
So the first thing, it's gonna give back is, the actual response from the server, so in this case, it's gonna be an object. And what we get back from the object is gonna be a data property. The fact I think, should be giving me some, no, it doesn't give me that.

[00:04:44]
So looking back at the data property, we'll get back some something if it's loading, something like that, to let us know if it's loading, things like that. And from there, you should be able to get the data, see if something's loading, and pretty much, look at that and see what it is, what you wanna do is you wanna get the data, and get the pets that you get back, and you want to pass them to the PetsList component on line 41, or whatever line number it is for you.

[00:05:13]
There's a PetList component at the bottom. It's going to take a pets property like that. And you should be able to pass in an array of pets like that, and it will give you the pets. So however you write your query, whatever names, whatever aliases you use, you need to get it using the useQuery, and you need to pass it down to the pets list.

[00:05:32]
And like I said, you're not gonna have any pets in the array, so you probably won't see anything. But nothing should, great. If you wanted to add some stuff to the array, you can just go to db.json in your pets array, and you can add some pets here, and you can look at a pet type,

[00:05:51]
>> Scott Moss: To see what field a pet has, and you can just make those up if you want, and put them inside your database. Or you can just wait until we get to the mutation part, totally up to you. Because I know react hooks might be a blocker for someone if we go to Apollo Click on Docs.

[00:06:09]
Click on this one, useQuery, next page, useQuery, there we go. So click on useQuery and here, here we go, so if you forget the syntax, it's just this. That's how you use current. Actually, I think I put an array, it's actually not an array, it's just an object.

[00:06:40]
So you'll get that data loading error. So yeah, if you forget, you can literally go to this doc page right here. If you forget the syntax, if React Host is just like what is this, that's all you need to know, just think of useQuery as a function that takes a query, and returns an object that has a data, which is what you'd get back from the server, a loading, which is true or false if it's a loading.

[00:07:01]
An error, which may have an error or not, that's it. This is not a promise, you don't need to wait it, you don't need to think about then, all you gotta do, so this, you don't have to think about react hooks, just that thing right there.