Retrieve Content With The Keystatic Reader API

[00:00] We have a list of posts and each individual post, but nothing about the authors at this point. If I go to the admin UI for this specific post, you can see that we have added this authors array here and we want to now display this on the front end. We are already getting data from KeyStatic in the front end. We just need to do a little bit more [00:19] work. This is the page for the individual posts and you can see we're getting the slug from the query parameters. And here we're getting the post from an asynchronous call to this reader. You can see we import this reader up here. That's a utility function that we've created. This comes from a package from key static core reader, and then we create this reader [00:39] passing the key static config to it. This reader API coming with key static is extremely powerful and we're going to use it right now. So we're getting the post from this reader and if there is no post, we display post not found and we can actually update this with Next. Js not found that comes from next navigation, and this will [00:59] essentially redirect to a 4 zero four page if no post is found. Alright. Let me scroll down a little bit. And since we want to get data about the authors, let's poke around with Keystatics reader API. Const authors equals await reader dot, and you can see here I have access to Keystatics [01:19] collections, config, singletons. Here we want the collections and we are looking for the authors. So I can either get a list of slugs for each authors. I can read a specific one based on a slug or I can get all entries with all of the data. So if I was to get that all and then below the [01:39] title here have a pre tag and JSON that stringify the authors, you can see I have the array of authors with Jed and Jed's showcase and the same for Simon. But that's not what we want to do here. Instead of having all the authors, we only want the authors that are [01:58] related to these specific posts. In other words, we don't want all the authors, we only want post that authors which is an array of slugs of authors attached to this post. Alright. Very good. So, here we have both Jed and Simon. But, if I go back to the other post, we only have Simon here. So, we don't want all [02:18] the authors. We want to read the specific one based on the post authors. But read expect a single slug and here post dot authors is an array of slugs. So for each author in the post that authors, we want to await a promise that's going to return us the data for this [02:38] author. So let's do this. Await promise dot all, which will wait for all the promises to resolve. And inside of there, I can do posts dot authors. And for each author, I will await reader dot collections dot authors dot read with the author. [02:58] And perhaps I should rename this author slug, which is what it is to make it a bit clearer. And I need to make sure that my function is asynchronous here. And so now the author's variable should be an array of author's objects, but only the ones attached to this post. Let's verify this in our front [03:17] end. My second post has an array with just Simon and the first post has an array with Jed and Simon. Perfect.