We're not gonna do that all in this guide, but we're going to take the next step. And so the very next step is knowing how many total records there are. So, a good example of this is if you are writing a brand new blog, you might have only two blog posts.

You don't really need the infinite scroll to trigger, because those two are gonna load up, you're gonna get 10 or however many that you get right away. So if there are no more blog records, then the infinite scroll doesn't even need to be triggered.

So what we're gonna do in this guide is we're gonna see how we can go and look in the data. So we're going to dissect what comes in a little bit more, and we're gonna see how we can use that to update our state and give our component all the knowledge it needs in order to take the next step for building the infinite scroll feature.

So let's open up visual studio code here, and we're gonna add a few more items to state. So I'm gonna add a totalCount and I'm going to set it to the default state of zero. And then I'm going to say current page and set that to the default of zero as well.

And I'll walk through exactly why I'm setting these values to zero, it's because when we have the constructor, we want that, that's gonna load before our records come in. So this is simply a default value, we're gonna override it as soon as we get that update. So now that we have that, let's come down into our get blog items right here. And what I wanna do is make sure that the very first time that this is triggered, we start on page one.

So that means right away we're gonna want to update our state, and we're gonna increment our state, for current page by one. So at the very top, even above the Axios call, I'm gonna say this.setState, and then inside of this update I'm gonna take that current page, so I'll say current page, and I'm gonna set this equal to this.state.currentPage + 1.

And so what this means is when the component gets mounted, so when someone goes to this page, it's gonna start at zero in the constructor, but as soon as the getBlogItems is called, we're going to update that to be one, and then as soon as we keep scrolling down, as soon as we activate that infinite scroll. So for every future time that we call getBlogItems, we're going to call this again and it's gonna keep on going.

Now I used currentPage because that works in my mind, because I've spent years before infinite scrolling was really even a feature anyone built I spent years building out paginations, so that's where you would have all the little links down at the bottom of the page and you'd click to go to the next page, or to the 10th page, and so I like to use this type of naming structure, because it's very clear.

This is telling me that if I was building pagination, this is the very first page that gets loaded up. It's like if you do a Google search, the first page, that current page that you get, is going to be equal to one, so that's what we're doing there.

So now that we have that, what we need to do is go and see how many total records are on the API's server. So this is gonna be a different number for everyone, however many records you've created, that is gonna be what this value is. So instead of me just showing it to you, let me show you how you would actually be able to get this information if you weren't following a step by step tutorial.

So I'm going to call the debugger right here in the response. So this is gonna call the API, it's gonna send back all of the blog records, and then it's going to stop execution so that we can ask some questions of the data. So let's open up Google Chrome here, and you can see it already triggered the debugger, because it reloaded automatically. So if I go to the console and I type in the response, we know that we're getting the same response object that we've been working with this entire course.

Now if you go down into data you may think, okay, I just have these portfolio blog records. But if you open this up you'll see you have that array of 10 items, but you also have this metadata, and that's what we're gonna work with here. So if you open up the metadata object, you can see it tells you the total number of pages that are available, and also the total records. And all we care about right now is the total records, that's all we need for our infinite scroll.

So this is kinda giving us the full picture of what's on the API, so we're not guessing, we're not going to activate the infinite scroll, scroll down to the bottom of the page, and then just hope there are more blog records, that'd be a very poor way of building the system.

So instead we are going to tell our component exactly how many records are on the server so that it can have that knowledge and then eventually we'll be able to build in the ability to have it make smart decisions based off of that, such as if you reach a spot where you know that the total number of records that we have is the same, or it's equal to 18 in this case, then we don't need to call the infinite scroll feature again, we can just skip it.

So let's go and grab this. If you want to think of traversing this tree, it's response.data.meta.total records, so that is exactly what we are going to add. I'm going to get rid of the debugger here, and inside of setState add a comma at the end of this line. And now I'm just gonna call this, let me see, totalCount, that's what we called it. So I'm going to update the totalCount and I'm gonna have it set to be response.data.meta.total_records, that's what the API's calling it.

blog.js

.then(response => {
  this.setState({
    blogItems: response.data.portfolio_blogs,
    totalCount: response.data.meta.total_records
  });
})

Now like I've added as a caveat multiple times in this course, I was the one that built this API, no two APIs are built exactly the same. So some developers will put a meta tag inside of their response data object, that was the way I was taught how to do it, and it's the way I like to do it because it's a very nice and clear where all of my data is when it comes to total number of records, pages, and things like that.

There may also be times, I've seen developers place that information, not in the data object, but actually in the headers. I don't like doing that 'cause it usually requires a little bit more parsing and to me it's not quite as intuitive. But just so you know, every API is different, so you may need to keep that in mind.

So let's hit save now, and let's just finish off with making sure this is working. So I'm gonna hit refresh right now, and all of our records should load up, there we go, open up the react dev tools, go into react and then let's just select the blog, not the blog item, but the actual blog component here, and let's go look at its state.

You can see have a blog items object with we have current page of one, so this also means that our incrementer is working perfectly. And then look at that, total count is 18.

So hopefully things are starting to come together for you a little bit and you're starting to see exactly what we're leading up to. Don't worry if it's still fuzzy, like I said, building an infinite scroll feature is not a trivial thing to do, but hopefully you're seeing how we're taking a very methodical and kind of common-sense approach to being able to build this feature out.

What my goal was with this whole section on building this type of feature is to hopefully remove some of the magic from it. That's a reason why I didn't even wanna use an NPM module here, because I wanted to show you that just with pure JavaScript you have access to the browser, you have access to listen to scroll events.

And here with working with APIs you have access to count up records and you know how to already count up the length of an array, so we're putting all the pieces together and we're gonna be able to make an informed decision on how our new infinite scroll feature's going to work, when we are gonna call for new records and performance tasks like that.

So great job if you went through that. You know have all of the key data points that you need in order to build this feature out.

Resources

• Source code