Apollo Client & Hooks

[00:00:00]
>> Scott Moss: Now that we know how to write a query, we know how to set up Apollo Client. The next thing we do is we're gonna hook it up to React, and we're gonna write our first query against our API to actually get some pets and show them on the screen.

[00:00:11]
So let's do that. I'm not gonna do all of it for you, you're gonna have to do some of it yourself. But I'm gonna get you to the part where this is at least hooked up to React, and you can get going. So the first thing is, if you've ever used React before, you normally have an index app that you bootstrap on the page.

[00:00:28]
This is our index app. This is the app that gets bootstrapped on the page. Ignore the browser router. If you've never used React or never used a router before, don't worry about it. This is JSX, it's just a way to write some component language. And the thing we need to do is we need to wrap, whatever part of our app that we want to expose to Apollo, we have to wrap it in an Apollo provider.

[00:00:51]
So in this case, our whole app is encapsulated in this app component. So all we gotta do is just wrap this app component with an Apollo provider. So we'll do that, it should already be imported for you at the top. But if it's not, it's gonna be from @apollo/react-hooks, and that's the one that we're gonna be using.

[00:01:07]
There's another one called React Apollo, or Apollo React. That one's being phased out in favor of the @Apollo. Every organization has their tag now on npm, @apollo/react-hooks. So we'll say ApolloProvider.
>> Scott Moss: Like that.
>> Scott Moss: And we'll put the @ between it. And ApolloProvider in this case is only gonna take one prop, and it's gonna be called client.

[00:01:39]
And you guessed it, we're gonna be passing in the client, that's it.
>> Scott Moss: So usually it's something that, something like this in React that wraps another component and takes a prop, usually it's manipulating the context API, or something like that. So through the context API, we get access to whatever this client exposes to us.

[00:02:00]
In this case, we're gonna be using React Hooks, so it's gonna be a little different. But yeah, you still get access to some of that stuff through the context. We just won't be using it. Any questions on this? All right, so we've made the client, we made an ApolloProvider.

[00:02:15]
We passed it the client that we created, and we wrapped our entire app with it. Pretty simple so far. So then you head over to the pets page, pages, Pets. And this page is what you see when you load the app up. It's just this basic page here that says Pets and New Pet, doesn't really do anything.

[00:02:34]
>> Scott Moss: You're gonna get to the point where you can actually write a query using Apollo GraphQL to actually load in the pets from our API. Now we're gonna go ahead and, anyone here ever used React Hooks? One person, okay. So I did my best to abstract that away cuz I don't want React Hooks to be like a big deal to this, and it's really not.

[00:02:59]
You almost never have to interact with it. But what we're gonna be doing is there's these things up here called useQuery and useMutation, which are hooks that Apollo has created for us to interact with GraphQL. You don't need to know anything about how hooks work. The only thing you're gonna need to know is the two things I'm gonna tell you right now, and you can look at from this example right here.

[00:03:21]
So useState is a hook that React applies for us. Whenever you use a hook like this, useState, there's a couple things. One, it's gonna return an array. And the first argument is gonna be the state that you're trying to keep track of. So in this case, I'm trying to keep track of a state that I call modal.

[00:03:39]
You can call this whatever you want. This is destructuring, this is destructuring syntax in JavaScript in an array. So whatever the first thing in the array is I'm gonna set it to a variable called modal. The second thing in the array is always gonna be a function used to update that state in the first argument.

[00:03:55]
That's it, that's how hooks work. You get a state property that you're interested in, and you get a function to update that state property. And then when you use the hook, you pass in the default state. That's it, so by default, I'm setting modal to false. And now I have a function called setModal that I can take an argument that will set modal to whatever I want it to be.

[00:04:16]
That's basically what it is. If you've ever used React without React Hooks, this is like setState. This is literally a setState function for this individual state property. That's all it is. So instead of having an object with all these properties on them, and you set state, and you gotta copy the object just to change this one field.

[00:04:34]
You're saying, I'm only interested in setting the state for this one field, which defaults to false. And whatever I call this function with the variable, that's what I'm setting it to. That's how hooks work in detail. And when you change that state, it's gonna cause a re-render, so your function re-renders.

[00:04:52]
Just like setState would, it's gonna re-render. So it's the same thing, it's just abstracted away. They have their reasons for it. I recommend looking it up if you wanna know more about hooks and things like that, but everybody's pretty much doing this these days. I think this is, I think a lot of this came from Svelte, actually.

[00:05:08]
I think they were some of the first ones to do this, so React's doing it, Vue's doing it now. But yeah, I think it's a good approach, allows you to co-locate your code together versus having it in all these separate places.