Hygraph (with Next.js) Tutorial #7 - Fetching Posts

Key Takeaways

All right then, gang. In this lesson, we're going to start fetching post content. So, we can list these posts on the homepage. And for this, we're going to need to make a new query. So, I'm back on the Higraph Studio where you can see we've got all of these blog posts that I created before. I think I added about 10 in total so that we've got some good data to play with. And now, I'm going to head to the API playground to put this query together. So, then on this page, we'll first of all make a new tab up here for a new query. And I'm also going to name this query posts so that when we copy this query into the project code later, we don't have to rename it then. Anyway, in this query, we want to tell high to send us a list of posts. So let's click on the posts option in the explorer first of all. Then once we've done that, we can just specify which fields we want from each post. So we're going to be showing a list of these posts on the homepage, right? And we don't want to show the entire thing, just a preview of each one. So, for that, we'll select the title of the post and the summary and also the thumbnail because even though we won't be using it yet and we've not added any thumbnail images yet, we will be doing that later. I also want to add the slug of each post because we'll be using that to link to the individual post pages. And then finally, I want to order these posts by the created at date. So to do that we can use the order by filter up here and we can select published at descending for the value. And notice when I do that it adds the filter to the query. All right. So I think that's all we need. Let's try this out by hitting the play button up here and making sure we get that list of posts back as a response with those fields which we do. Awesome. We can see the post property which contains that list. So let's copy this query now and then head back to the code to set it up. Okay then. So now let's head to the hierigraph page which is where we register these queries inside that queries object and I'm going to add on a new property for this query which can be something like posts. So the value of that property is going to start the same way as the other one that we made with hygiaph client which is that client we made earlier with graffle. Then we can saygql followed by a template string. So back ticks and then within those back ticks I'm just going to paste this query in that we copied and format it just a little bit to make it look nicer. Right? Then so now we have this second query registered inside this object. Right? And again you don't need to put all your queries in an object like this. If you don't want to you can write them directly within your page components or the actions file or some other file if that's what you prefer to do. I'm just doing it this way to stay organized for this series because then I know where all of my queries are going to be. Anyway, now we have this. We can create a new action in the actions file which uses this query to go and fetch all the posts. So, let's head to that file and we'll export and make a new function down here which I'm going to call get posts, but you can call it whatever you want. Doesn't really matter. It doesn't have to be called this. And this function needs to be asynchronous because we'll be using a weight inside it to fetch those posts. Okay. So now inside we can say const response is equal to await and then we want the queries object and then on that we need the posts query. Now to send this query we need to use that send method which graph attaches to all the queries that we make using the clients. So then this sends off the query and hopefully it sends back all those posts like we saw in the API playground earlier and we just now need to return those posts by saying return down here and then response.posts. Okay. So now all we need to do is invoke this action from the homepage so we can use all of those posts in the template. So to do that I'm going to head to the homepage file which is inside the app folder. And inside this file, the first thing I'm going to do is paste in the action import at the top. So this is the action we just created to query the posts. And now down inside the component itself, we're going to invoke this action by saying const post posts is equal to await and then the action itself which is called get posts and we can invoke that. Now again because we're using a weight, we also need to make sure this page component is an asynchronous one by using this async keyword up here. And once we have these posts, we can then use them as the initial pro uh the initial posts prop value down here in the post list component instead of just the empty array. So now inside that post list component, it's going to map through the posts that we pass in and output a bit of template for each one. Let's open that file then which is inside the components folder somewhere. All right. So we already accept this initial post prop which contains all those posts now and we just need to go through this template and output the post detail. And by the way we store the post in this state. So we'll be using posts down here not initial posts. All right because that's what we map through. All right then. So for each post what do we need to output? Well first of all the key for the article. So let's delete this value right here. And we need something that's unique for each post. And we know that the slug for each post must be unique. So let's use that post. slug. All right then. So what else? Well, we don't have any images uploaded to Higgraph yet. So we'll leave that for now. But we can update the alt tag right here. So instead of outputting the post title, I will use dollar sign curly braces and then say post dot title for this. So this is the title of the blog, right? So, we're just using that for the alt text. All right. Same down here. Post.title. Post.title. And then we have the summary. So, post dot summary like so. And then we actually already had this slug set up. So, this button at the bottom to read more goes to forward/blog. So, into the blog folder. And then the slug is output after this. All right. So, that's already done as well. And I think that is pretty much it. All right. So, now we can see all of those posts on the homepage, including the post title and the post summary. We still see that default placeholder for the thumbnail, but that's because we've not added any post thumbnails yet, but we will do later. Also, if we click on one of these links, it takes us to the post details page for that post, and we should see the post slug in the address bar, which we do. And that post slug is also being output in the template as well because I grabbed that from the params prop in this page component. In the next lesson then we'll fetch this single post using the post slug and then we'll show that post content on this page.