Retrieve Content With The Keystatic Reader API

Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated 2 months ago

In this lesson, you'll use the Keystatic Reader API to retrieve data from the file system. We're doing this server side, so we use Next.js 14 server components to get this data.

[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.

egghead
egghead
~ 9 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today