This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "Querying with Apollo Client" Lesson
[00:00:00]
>> Jason Lengstorf: And so, now what we've got here, is when this result component loads, it's gonna receive a name prop. Upon mounting, it's going to run this useQuery and that useQuery will determine what display. So we'll either show a loading stage, an error stage, or the results, or an empty state if there's no results.
[00:00:26] So let's go ahead and run it and see what happens. We're gonna use netlify dev.
>> Jason Lengstorf: So to use it we are gonna have to import it, so let's grab results and results. And then you can drop this in here. And it needs a name, so let's just hard code one for now, we'll say rick.
[00:01:05]
>> Jason Lengstorf: And we've got an issue, and that issue is we installed the Apollo plugin, but we didn't actually configure it. So in our gatsby config, we're going to-
>> Jason Lengstorf: set up module.exports and then we will set up our plugins. And we're gonna resolve gatsby-plugin-apollo, and for our options, we're gonna set a uri.
[00:01:35] And that uri is going to be the rickandmortyapi.com/graphql. And what we're doing is, we're telling Apollo to set up a client. And the client that we wanna set up, is going to try to attach to a GraphQL endpoint to make queries against. So the way that we're doing this, we're using a helper in the gatsby-plugin-apollo.
[00:02:00] So that we don't have to set up the provider and mess with getting the client configured. This is only gonna work in the happiest of paths, if you're doing anything custom, middleware, anything like that. You'll probably find yourself having to manually configure the Apollo client. But for simple examples where your GraphQL endpoint is pretty straightforward, you're not doing any kind of cross origin stuff.
[00:02:25] You're gonna find that this is a really nice way to very quickly set up the GraphQL client. So now that this is configured, we should be able to start it again, and now it'll actually have a Apollo client to run against. Let's do netlify dev.
>> Jason Lengstorf: Okay.
>> Jason Lengstorf: All right, so-
[00:02:59]
>> Jason Lengstorf: We're kind of okay here, but something went wrong, because we should have results. So why doesn't it like our results?
>> Jason Lengstorf: And we're getting them, so this is my favorite hack when you're doing client-side stuff. Is you can go to the Network tab and see what's happening, and so we know we're getting data.
[00:03:22] So the error is in my code, not a problem with the network. So we can go back and look at our results, and figure out what was missed.
>> Jason Lengstorf: So we've got if we've got data, and we've got data characters.
>> Jason Lengstorf: But we need the results length, not the characters length, so that is me.
[00:03:54] Hey, there we go. So what we can see now is that we are doing a search, and we're getting a search for what we want. Okay, this is all good, so let's search for Rick, let's search for Morty. Okay, so we're not pulling anything out yet, we've hard-coded our name.
[00:04:11] So the last thing that we wanna do here, is extract that query from the state, if we're doing it locally. Or from the Path if we're being linked to it. And make sure that we're actually searching for what we wanna search for, and not what's hard-coded. So to do that, we're going to open up our search component, I need to rename that to Search.
[00:04:41] And inside of it we are going to turn this into a full function, so that we can do some query management in it. And we're gonna get the query out of the location. So something that Gatsby is gonna pass into every page, and again this is only for pages.
[00:04:59] So anything that's created with the Create Page action in Gatsby, which is anything in the pages directory. Or anything that's created as a template using like Gatsby actions Create Page. The location is gonna come in as an object that gives us some metadata about where we are. And what we want specifically in this case, is we want to get the location.state.
[00:05:30] And if that's set, we wanna get the query out of it, so location.state.query. And if that's not set, then we can jump down and say let's get the location.pathname. So the location.pathname is gonna be like Search /Morty. So we can replace, and again we're getting into regular expression land.
[00:05:57] So anything starting with search, we are going to-
>> Jason Lengstorf: remove the /search and the \ after that, and we will replace it with nothing. And if that doesn't work, we will set it to be an empty string. And then to get the name, we're going to do a query.replace.
[00:06:27] And we just wanna take any hyphens and replace them with a space character. And so we're using regular expressions here. So any hyphen, the plus means one or more, so we're looking for one or more hyphens. And then we'll collapse those down into a single space character. That means that we have a name now, and it also means that we can show a little more helpful information.
[00:07:03] So let's start, we'll quote this and we'll say that if the name is set. We're going to say Showing results for "{name}" and that's gonna need to be a template literal. Otherwise, show Search for Rick and Morty. So first it should show us what our current Search query is right in the headline.
[00:07:31] Next, we're going to say if we have a name, then show the results.
>> Jason Lengstorf: And so what we should see here, is now it's showing us results for morty and it will pull that from here. So if I do another search, let's say alien, it loads aliens. And if I search for rick, it pulls up Rick.
[00:08:04] And then if I take something like this, and I throw it right into the URL, it will search for Adjudicator. So we can now search for things by updating the URL. We can share these links around and someone could click it and see those results. And all of that's done by using Apollo on the frontend, and then setting up client routes in Gatsby.
[00:08:28] To handle all of the routing and making sure that things end up where they're supposed to be.