7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Embedding Data

The /posts endpoint gives us information about our posts, but by default, user and category information is returned as just their respective ID numbers. We can issue more requests to retrieve that information, but we want to use as few HTTP requests as possible. Thankfully, we can request that extra data within the /posts payload. I'll show you how in this lesson.

3.1 Embedding Data

So we have an application that displays our posts, not only a post list but also the individual posts. And we have the navigation to be able to go in between those two things. Now as far as what we display, we have just the title and the content. And there are other pieces of information that we would like to display. One of those would be the author. It really doesn't matter if we are showing the list or an individual post, we want to see who wrote the post. So in this lesson, we are going to do that. And we're going to look at two different ways. There is one way that will work. And it's probably the more straight forward approach, especially if you're not going to look at the documentation, but there's a better way. So we're not going to implement the straightforward way, but I'll show you what is at our disposal. So, I'm going to take the data from retrieving our posts and I'm going to write that to the console so that we can inspect that object. Because this will tell us, basically, everything that we can retrieve. Now, some of this information we have at our disposal, just right here within this object, but look at the author, we just have the id. So, if we wanted to retrieve the information about this author, we could use the API to retrieve that author. And the URL is a lot like what we use for a post. So we'll say, localhost and then wp-json/wpv2, and that endpoint is called users. This is going to return all of our users. And we have just one, I believe. Do we have a second user? I don't remember if we created one or not. This will tell us right now. No, we just have one. So, if we wanted to create another user then we would see that user in this JSON structure as well. Now, just like posts, we could also retrieve the information for an individual user. And all we have to do is just add the id as the next segment in the URL. So if we are going to retrieve the user with an id of 1, this is what our URL would look like, wp/v2/users/1. So if we go to that endpoint, we're going to see the JSON structure slightly change, because we are requesting different data. But this is the information about that given user. So we could make a request, using that id in order to retrieve the user, and use the information that's given to us from here. But that means that we have to make at least two HTTP requests. One for retrieving our post, and then a second for retrieving the user information. Now, in the old days that might have been acceptable but not in today's day and age. Modern web API developers know that we want to make as few HTTP requests as possible. And so they allow us to include additional but related information with a request, and the WordPress API is one of those. But unfortunately, we can't specify what we want to include, it's an all or nothing thing. So, we don't use the users endpoint in this case. Instead, we're going to go back to posts and we're going to use the query string. We're going to use a parameter simply called _embed. Now you don't have to supply a value for this. But if you do want to, you can set it equal to 1 and it is going to include a lot of extra information. I mean, this is more than what we had before. If we remove the _embed query parameter, this is what we have. Otherwise, we have a lot more. Now it's kind of hard to see what exactly we have here. So let's look at it in an HTTP debugger that can parse JSON. So, I'm going to fire up Fiddler, I'm going to make a request for that endpoint. And we are going to be able to view the response. So, let's move that up and here we go. Right off the bat, we have this underscore embedded key, and this is where that embedded information is. And we see that we have this author. So the author includes a lot of extra information. There are links that we can use in order to retrieve all the users or the specific user for that post. That also has the avatar_urls if we wanted to use those. A description if one was set. And then there's a link to the user for our WordPress installation. Now, just to be clear there is not link our client application, because the API has no idea that our client application exists. So, all of the links are going to be to our WordPress installation. But then we have the name, and that's primarily what we are wanting. So, whenever you add the _embed flag, it's going to add a lot of extra stuff. So in our case, all we really need to do is just to add that flag, whenever we make a request using our API class. So let's add it, all we want to do is include that with every request for our posts. Now, you can make the argument that we don't want to do that for every request, but I think we do, because we always want that extra information. And since we can't say that we only want the user information, well, we just have to include it. So, all we're going to do is say, url +=. And then we are going to add the embed query parameter, and that's it. Now, of course, we need to change our Post and our PostList components to display that information. So, in our PostList, we're going to add a small to our h3 element. Actually, it's going to be inside of the Link element. And we're going to use post and then _embedded and then author. Now, author is an array, I'm not sure if that was actually clear here. If we look at author, but really it's an array. We're going to say, author, and then the index of 0, and then finally the name. So, it's a lot of extra typing that we have to do but it's going to give us the names. So let's look at the browser. And there we have it. We have the title and then the name of the user. Although, let's put by and then the user name. So we have that, now we just need to retrieve that inside of our post as well. So, we are getting the title and the contents. Let's go ahead and just create another property in our state called author. We will initialize that as an empty string. And then whenever we set our state we will say, author, and of course, data._embedded.author, at the index of 0, then finally, name. So that whenever we display title, we would ocne again use a small element by, and then author, or rather, post.author. And that is going to display that information there. So, whenever we navigate to an individual post, we should see the user listed there as well. Let's just make sure, and there it is. So we are now pulling in the author information and displaying that with our Post and PostList. But that's not all we want to do, we also want to display our categories. And not just with a post, we also want to be able to list all of our categories with something like a menu. And we will do that in the next lesson.

Back to the top