Now over back on the instructions I'm going to copy and paste that right inside, and next we don't want to try to query yourhost.com, we want to actually query our WordPress GraphQL endpoint, and that endpoint is going to by default be basically wherever your WordPress instance is installed slash GraphQL. So for instance, if I open up my spacejellydemo.wpengine.com slash GraphQL, we can see that while I do get an error here, we are able to see that this is a working GraphQL endpoint. So I'm going to take the same URL, and I'm going to paste it right into my environment variable, where we can see we now have this WordPress GraphQL endpoint set to my actual URL.
And now let's try to spin up our development server by running yarn dev, and we can see that immediately it's going to spin up a new server pointed at localhost port 3000. And if I actually try to open that up inside my browser, we can see that next.js is going to start to compile that page, where basically, it's pulling down that information for us, and it's going to actually build that page in real time. So we can see here now that I have my new blog post, my blog page, that is, my blog website, and we can see that if we start to scroll down here, we have all those posts that we saw right inside of WordPress, but now we're actually getting them inside of the application inside of our browser. So now we can see that we have each of the titles, and we have a description, and we even have a link for each of our posts, but we want to add a little bit more context to this. How about, what if we want to add the author to each of these posts. First, let's dive into the code to see how this is actually happening. So I'm going to go back to my code editor, and I'm going to particularly go to source pages index.js, which is going to be our home page, and if we see at the top here, if you're already familiar with React, there's really nothing special going on here. Really, we have our home component that's taking two props, and it's rendering that out into the page. But what is special is if we scroll way past that React component, we have this function that we're exporting called get static props, which is the Next.js way to fetch data that's going to be static for our application at compile time, where we can see that we're getting our Apollo client, and we're building this GraphQL query, where we're grabbing some general settings for our website, but we're also grabbing all those posts, just like we saw that we did before inside the Graphql Editor. Finally, once we have that data, we're going to just clean it up a little bit, and we're also going to construct the path that each of the posts is going to be available at, and then we're going to simply pass them as props, which again, if we scroll back to the top of the page, we can see that page and post props that we're passing right to the React component. And then at that point, it's just like any other React component, where we're grabbing those posts, we're iterating through, and we're able to render each one of those inside of the DOM, where then we have our Space Jelly demo blog site. So now, like I said, we want to add that author to it. I'm going to first grab that existing Graphql query that we saw right here, the one that we're actively using inside this project, and I'm going to go ahead and paste it right into my Graphql Editor here, going to click Printify here, just to fix the indenting, but I'm going to click Play, and we can see this is exactly the data that we're getting and passing into the application. We see that we have all the posts, we even get the excerpt here, but we also get that title and description, which we can see at the top that we're showing. So now, while we have all this other information for our posts, we want to also add the author to it. So we're going to find that posts section, which is right here, we have our posts, and for each of those edges in the node, we also want to add the author. So I'm going to simply start to open up that author, query the node for each of those authors, then we can see we get all the attributes for the actual author on the post, or in this instance, we probably want to grab the ID, since that's something that we usually want to have for each of our nodes, but then we want to also grab the name, which if we click play now, and I start to scroll down on the received data, we can see that we now see the author for each of these posts, which in this particular instance, it's myself. We see Colby Fayok here, but we were able to see how easy it was to paste in our existing query, update it, where now, just as easily as we pasted it in, let's copy this, and let's paste it right back into our application. We're now going to fix the indentation there. We just updated the query inside of our app, and to see that this is actually working, I'm going to console log out the actual posts prop here, where if we go inside our browser, I'm going to refresh the page, and I misspelled that there, so instead of console logs, there's only one of them, but we can see when the page actually reloads and recompiles, we have this array of data, which is all of our posts, but we now have this author property here, where if I start to expand everything, we can then see my name, KolbyFayal. So let's actually add this into our page, so I'm going to head down inside this react component, where how about right under the title, let's add a new paragraph tag, and let's say bye, and we're going to add our user name, let me close this paragraph tag, but we're going to specify the post.author.node.name, and just for my sanity purpose, the node.author.node.name. So let's see if that works. So now if we reload the page, and it actually probably should have fast reloaded, we can see that I do have Bye KolbyFayal there. And of course the spacing probably isn't the best, we can fix the styling later, but we can see how easy it was to update our query, simply add a little bit of data to that by updating that GraphQL query and we were able to immediately have that available on that post prop that we just passed right into the application, and we were able to do that because we now have the power to query those complex relationships, even the categories if we want, by using GraphQL and WordPress. All right, so let's actually recap what we achieved here. We first took an existing WordPress instance, and we installed WPGraphQL. Once that was ready, we were able to see how easily we can query all that WordPress data with GraphQL.