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

Key Takeaways

Right. So now we fetched the page content, we fetched blog posts and we've also implemented pageionation on the homepage for those blog posts. If we click on a post, we go to the details page for that post where we see the whole thing. And we also see this sidebar section over here which says more posts by Net Ninja and it's completely empty at the moment. So what I'd like to do is make another query now to fetch the latest three posts by the same author and display the titles of those posts as links right here. Then we can click on those and it's going to take us to the details page for that post. So let's head to the high studio first of all as usual and put this query together. And I just want to mention at this point that I've already invited another user to this high project by coming to the project settings down here and then from there going to the team section where you can click on this button to invite new members and you can see right here I've already got that new member listed. So, if I go to the content section now and look at all the posts, you're going to see I've added a handful of new posts by this new user just so we've got some extra posts to play with which are by a different author. And that means we're not always just going to be seeing Net Ninja as the author in the sidebar. Anyway, now let's head to the playground section and try putting this query together. So, then let's start by making a brand new query. And I'm going to call this query posts by author. And this time we don't need pageionation because we're just going to query three posts, right? So let's click on the standard posts thing right here, this option. And now for each post that we fetch, we only need two things. The title, which is what we'll be showing in the sidebar, and the slog to link to that post page. We don't need the summary or anything like that because we're literally just listing the titles. So add those two fields to the query. And now there's two more things we need to do. First, we need to only fetch posts by a certain author name, right? So, let's click on the where filter to say we only want posts where and then we want the created by property and then the name property within that. And we want to make sure that is equal to a certain value, right? And there's a ton of options right here. So, it might take you a while to find this name property, but they're all in alphabetical order, which is nice. Anyway, we can hardcode this name for now. for example, net ninja, but later we'll use a query variable instead. So secondly, we only want to get the first three posts. So let's say click on the first filter and let's use three as the amount. And if we send the query by clicking on the play button, we should only see three posts returned where the name of the author is Net Ninja. Awesome. So let's copy the query now and use it within our code. So then the first thing we're going to do is add a new query to this queries object. And I'm going to do it right down here at the bottom. And we're going to call this post or posts rather by author. Right? And then we'll do a colon and then it has to be the hygraph client.gql again just like we've constructed the rest. Then template strings. And then we're going to paste in this query. I'm also going to format this a little better. All right. So at the moment we have this hardcoded the name but we want to take this in as a query variable. So let's do parenthesis and this is going to be called name and this will be a string then an exclamation mark because it must not be null. Okay. So now we can place the name variable right here instead. So that is the query created. Now let's use this inside the actions file. We'll create a new action for this. So let's say export and then an async function again this time get posts by author and it's going to take in a name variable and inside that we're going to say const response is equal to await queries again and then dot posts by author. Click on this one. Then we'll use the send method and we want to pass through that name variable. Okay cool. So now we just need to return the post. So let's say or rather the posts. So return response.posts like so. All right. So now we've got the server function ready. We can use it inside the blog details page to fetch new posts by the same user. So let's head to that page component which is inside the app folder. Then inside the blog folder, then in the slug folder. And inside this page we're going to import the function at the top which is called get posts by author. And that comes from the same actions file. All right. So now we can use that function down here in the component by saying const post posts is equal to await and it's get posts by author. And we want to invoke that. And we need to pass in the current author name into this as an argument which we have access to in this page from the created by property we get right here when we access the post. So we can just pass in the created by name and hopefully that's going to return us three posts by the same author which we can then output down here in the sidebar. Now I'm just going to delete the current paragraph tag. And then I'm just going to paste in a snippet of code that maps through the posts and outputs a link for each one where the href for the links is made using the slug for the post and the title is the text content for the link itself. Right? So now we're fetching additional posts by the same author as the post we're currently viewing and we're displaying those in the sidebar. Now, before we try this out in a browser, we need to do one more thing, and that is to import the link component at the top of the page so that it can be used in that sidebar. So, I'm just going to copy this from my course files, and then I'm going to come right back up here and paste it in. All right, so now we can try this out. All right, so I'm going to just go to load more posts and click on one of these. And we're going to see more posts by Net Ninja. And we have these three posts right here. So, if you click on one of these, it goes to that particular post. Awesome. Now, if we go back over here and click on one of the new ones, we'll click on read more. This should be Yoshi now. More posts by Yoshi. And now we see Yoshi's posts. So, that's all working. Awesome.