00:00:02 Now that we've done most of the UI, we are ready to fetch the question data and show it here.

00:00:07 There's already an action called getQuestion, which we used in questionActionTS.

00:00:13 this one right here, get question.

00:00:16 We used it on the edit page to get the question information.

00:00:19 We already have all the info we need here.

00:00:20 We just need to make a small change, and that is to populate the author information, because we also want to fetch it alongside the question.

00:00:28 So head down to where we're trying to fetch that question, and then on it, also add the .populate author, and specifically we want to populate the underscore ID,

00:00:38 the name, and the image of the author.

00:00:40 We don't need anything else.

00:00:41 Now, head over to the question ID page, so that is this one right here, and let's fetch it.

00:00:48 But first, make sure to delete the sample question from here, and instead, we can simply say const, destructure the success,

00:00:57 as well as the data, which we can rename to question, and make it equal to an await call to getQuestion, which we can import from questionActions,

00:01:08 and to it, we have to pass the questionId.

00:01:11 So we can say questionId is equal to the id which is coming right here from Params.

00:01:16 We can then say if there is no success or if there is no question, simply return a redirect coming from Next Navigation to forward slash 404. But in this case,

00:01:30 we are getting back the question, so we're not going to 404, but the issue is that we no longer have access to the sample question.

00:01:37 Now, we can destructure all of this information from the real question coming from the database.

00:01:44 And I think we're mentioning it one more time down here.

00:01:47 This can be just destructured to title.

00:01:50 So let's also destructure the title right here at the top.

00:01:53 And that's it.

00:01:54 This question is not as detailed as the dummy question, but you can see that now we're getting a real photo.

00:02:00 It says AdrianJSMastery, which is the current user that I'm logged in with.

00:02:04 We get the question, real one this time, coming from the homepage.

00:02:08 We get the question details, when the question was asked, as well as the tags related to that question.

00:02:13 One thing you can notice that each P tag or even these bullet points have some kind of a top or bottom margin.

00:02:20 So let's improve the way this content is rendered.

00:02:23 Let's head over to the globals.css and search for the Markdown class.

00:02:28 It's already applying a lot of different properties, but now, after pros, we also want to apply pros-p marginY of 2, as well as pros-ol for ordered list

00:02:40 items marginY of 0, and finally pros-ul marginY of 0. If you do this, you'll notice that now everything works well.

00:02:50 And don't ask me how I found that these little three things will actually make it work.

00:02:55 It was through a lot of inspecting element and trying to figure out why these are getting added, and then now nullifying them through styles.

00:03:02 Let's also check out the other question to make sure it looks good.

00:03:05 Yep, we're good.

00:03:06 This question is pretty simple.

00:03:07 So with that in mind, we're now successfully fetching the data for each one of these questions, giving us access to a real question details page.

00:03:15 So let's go ahead and commit it.

00:03:17 If you didn't yet commit previous lessons, that's also totally okay.

00:03:20 I'll just say fetch real question details.

00:03:26 Commit and sync.

00:03:28 And in the next lesson, I'll teach you how to implement the number of views of each question, which will show us how many times have users clicked on each

00:03:37 one of these questions.

00:03:38 Pretty cool feature that you don't see often.