Apollo Client & API Querying

[00:00:00]
>> Scott Moss: Now we're gonna talk about queries in React. And we're gonna do a follow along, so what I want you to do is if you have the repo, you can open up the repo here. And what we're gonna do is we're going to one, initialize a client. With Apollo, and then from there we're gonna go and start creating some of our first queries.

[00:00:23]
So if you go to this repo, and there's one script that you probably wanna run and that's gonna be yarn app from the root, make sure you're on the client branch, make sure you did a yarn or an mpn install, whatever tool you're using got all of the dependencies.

[00:00:38]
And if you're running yarn app, it's going to build this app and serve it all into whatever port. Mines is one, two, three, four, yours is something else. I'm building this app using something called Parcel which is a bundler. It's super easy to use, you don't have to do any configuration.

[00:00:52]
Feel free to look at the package.json to understand how I'm building that if you want to. So I'm just gonna go to this app. I think I already have it pulled up here. And if you pull it up you might see something like this. This is basic ugly app that says pets and new pet.

[00:01:06]
Cuz we're building a pet app. We're building a app that allows you to add pets and things like that so you can keep track of your pets, because people have hundreds of pets these days. So they need a way to keep track of them. This app will help you do it.

[00:01:22]
And that's what we're gonna be doing, if you click New Pet, you get to make a new pet, and nothing happens, so we're gonna make that work. So that's your context. So now what I wanna do is first I want to create our Apollo client. So if we hop into a file called client JS, hop into this thing.

[00:01:44]
You'll see a couple things here. One, it says, create a new Apollo client, an expert is default. So let's do that together. And this is where we will talk about, you're gonna see a lot of the stuff that I just glazed over. We're going to go a little more detail about it.

[00:01:56]
So the first thing is to create an Apollo client we need two things. The first thing we need is going to be what's called a link. So we and this is this a name that they call it a link is basically you can think of is like a network interface to access a graph kill server, we're gonna create a link.

[00:02:18]
It's basically something you're gonna do in the network level. In this case, we need a link to replace a new HTTP link here. We need a link that's gonna point to a server that we're gonna use for this app. So you use the new HTTP link which is provided to you from Apollo-link-HTTP.

[00:02:39]
And I think this takes a URI. And from here, we're gonna point it to a server that we have. So the URL to the server is if you go and open up a new terminal window here you can run yarn server in the same repo. And that should start a server for you, and you'll get the URL from that printed out.

[00:03:00]
For me it's localhost:4000, yours is probably similar. So that's the server that we wanna point this link to. So we're gonna copy that and we're gonna paste that into the URI here. So this is basically saying, we're getting ready to tell Apollo client, hey our API is here.

[00:03:19]
You can have multiple links and you can have multiple clients, all different types of things. But, for this example all we need is URI and the URL tour server, that's one thing. The next thing is we need a cache, so by default Apollo actually gives us a really cruel one and it's called the InMemoryCache from Apollo-cache-inmemory.

[00:03:40]
Now we gotta say cash = new in memory cache, and in this case, we don't have to pass in any arguments, by default it's good to go, we'll probably get to advanced arguments later. But this in memory cache is pretty simple, I believe it's an interface that anyone can extend.

[00:03:59]
You can make your own, I think you just need like a setter getter, like a delete, you can look at the interface for this very basic. I really liked the way Apollo builds their tools. They allow you to extend them super easily. They build really good foundations and then they build their tools on top of those foundations.

[00:04:14]
Which means you can just build your tools on top of their foundations and it just works. So I really like their approach in memory caches just the one they provide but like I said, you can literally make your own. You could turn this into local storage cache if you want, Ndeg's DB cache if you fancy that.

[00:04:30]
There's a lot of different things you can do as long as you use those, that interface that they created for the cache. So once we have our link and our cache we can go ahead and initialize a client. So we'll say const client = new. Apollo client like this.

[00:04:49]
And we can go ahead and pass in the link, like that. And then we can pass in the cache like that. And we'll just export this as a default.
>> Scott Moss: Not cache, client.
>> Scott Moss: And that's the simplest way to create an Apollo client that we can use inside our app.

[00:05:16]
And like I said, this has nothing to do with reacts, there's no react in here. There's no other framework here. It's just vanilla JavaScript. Before we get into the react stuff, I just wanna test that this client works. I wanna walk you through the tools and a lot of things.

[00:05:28]
So what I'm gonna do is I'm going to go back to our browser, find it, there it is. I'm gonna get that Rick and Morty API here. We'll copy it. Like this, and I'm gonna go back to my client and I'm going to just change the URI to the Rick and Morty one so we can use it right quick in here.

[00:05:51]
>> Scott Moss: So I'm gonna do that, and what I'm gonna do now is I'm going to just run a query right here in this file, log it out, see what happens. So quickest, easiest way to run a query is the one first, let's just make a query. And we can make a query using this GraphQL tag.

[00:06:08]
If you've taken any of the service side graphic courses that we have here at Frontend Masters, you'll notice that this GraphQL is a template tag that allows you to basically write a GraphQL query inside of template stream. And it gets to something like Apollo client can understand to actually issue a query.

[00:06:30]
So let's just call it characters,
>> Scott Moss: Actually I'm not even gonna do that, I'm gonna just run it as a promise, so I'll just say, let me get the query first, const query = gqL as a template tag, so I do the backticks. And I was gonna take the query that I already have from here.

[00:06:55]
I'm not even gonna do the operation name, I'm just gonna just grabs a query. And I do this shorthand method. First got to put object literal in there like that. It's not really object, it's just GraphQL, but you have to put those brackets. These brackets right here means, I'm about to do the shorthand method of a query.

[00:07:10]
I'm not doing the whole create a operation name, or nothing like that. I'm just doing the shorthand method. That's what those brackets indicate. I don't know why this spacing is off, it's really bothering me. Is anybody else like that? Why does that not index correctly, there we go.

[00:07:31]
So then I could just paste in that query like that, fix that indentation.
>> Scott Moss: There we go, and I'm just gonna get rid of these cuz that's not gonna work, and cool. I'll just get rid of that a list cuz it doesn't matter, get rid of that. And I'll just make sure I get back an ID or do you already have that cool.

[00:07:52]
So we have our query here. And the next thing we can do is we can say clients. And you notice there is a query method here. We say query. We can invoke that. And it just takes a query here. So options takes query operations. So if we do this, I believe it's a query field like that.

[00:08:12]
And because our query is actually called query, I can just leave it like that. That takes a promise. And we'll get the results and I'm just gonna log it, boom.
>> Scott Moss: Pretty simple here.
>> Scott Moss: All right, everybody follow me? Okay, so the next thing is I'm just gonna just import that client inside of index JS.

[00:08:43]
So I'm just gonna say clients from,
>> Scott Moss: Client. I'm not gonna do anything with it right now, but I'm just gonna import that in. That way it gets initialized when it runs, cuz index is the actual file that gets bootstrapped. Okay, and if nothing broke our build should still be fine.

[00:09:03]
This things rebuilds by itself when you hit save. Sometimes it'll error out, sometimes you might get an error in a console, you might have to rebuild it, but most of the time it's pretty good. I got the hot module reloading stuff happening down here, so we should be good.

[00:09:17]
All right, now what I'm gonna do is I'm gonna go to our app, open up the console here, this thing broke because I must have misstitled something. Results results. Arrow function whoo, we got to have that. All right, cool, so it looks like it works. It issued a query and we got back this response here, let me blow this up, got back data.

[00:09:44]
So every graph kill request comes back data, right? Remember that, it's always going to be a data field guarantee always going to be a data field. There are other sibling fields like errors field. If you have errors, you might also see an errors field, but usually you see a data or you see an errors.

[00:10:01]
And then there might be another field for like, extensions or stuff like that. But the spec is data and errors. So data and then boom, here's our query. We got back characters, we got back our results. And we got back all this stuff. All right, pretty cool. There is a chrome, if were using Chrome there's a tool called the Apollo, Dev tool if you have that, I'd definitely recommend, or if you don't have it I'd definitely recommend installing it.

[00:10:29]
But let me see, yeah we don't have it hooked up so I don't think it's gonna show up here until we hook it up with react. No there it is. So if you have that tool, and you're able to go to it, click on it through the dev tools, click on Apollo, you can go down to cache.

[00:10:47]
And this tool is using the same client that we created. So that client had any authentication hooked up with it. Anything that was hooked up to that client, this tool is using it. So it's pretty good. What we're looking at right now is we're looking at all the characters that came back from the API stored flat.

[00:11:04]
So here's the cache. Everything is stored flat here, every single character. And then we have this thing called the root query. And this is the query that we ran with null operationing basically and this is how it knows what this query had and what it's pointing to based on the ID.

[00:11:22]
So if we were to go update character ten, any query that had character ten in it would get the new character ten, and any view that was referencing that query would automatically update to show the character ten without you doing anything. If you had your app hooked up in a reactive way that way.

[00:11:39]
Which most apps like reactive so it's pretty free. But yeah, this is what the cache looks like, right? And we got back exactly what we asked for cuz that's how Graph QL works. Pretty simple.