Headless WordPress: Loading Posts & Pagination

In previous tutorials on Headless WordPress, we have covered several parts of using Gutenberg components, editing a profile and also logging using JWT tokens and social media. In this separate tutorial, we will start a new series of tutorials. In this first one, we will see how to load the posts and paginate them.

To start, open your terminal (command prompt) and place yourself in a folder where your app will reside. It can be anywhere. I’ll call my app wp-posts.

npx create-react-app wp-posts

Now, I’ll also add the support for SASS (SCSS) so you can style the articles yourself with ease, Axios to perform requests on our blog and Bootstrap to have a CSS Framework for quick prototyping.

Place yourself inside of the wp-posts folder to continue.

Install SASS:

npm install node-sass --save

Once installed, rename the App.css to App.scss and be sure to do that as well inside of App.js so it calls the SCSS file.

Install Axios:

npm install axios --save

Install Boostrap:

npm install bootstrap –save

Once installed, open App.scss, delete everything and just put this:

@import '~bootstrap/scss/bootstrap.scss';

Now, we can start working on loading the posts.

Loading and Retrieving Posts

Before we start working on our new Headless WordPress app, let’s be sure to understand how to approach this. We will try creating this app using React Hooks so we can both learn something new.

We will store articles in the state. Once we get to a page, we will load articles for that page. Since we are storing articles, we don’t want to fetch articles from the same page again.

To be sure we don’t do that, we will also store pages and articles IDs associated to each page. Then, when we get to a page, we will check if we have articles for that page.

If we do, we will just get those articles from the state. Otherwise, we will fetch new articles from our blog.

Creating the App Skeleton

Let’s now create the App Skeleton for our Headless WordPress app. This will contain all functions and the main one that we need. Then, we will go over each part and add the appropriate code.

The function getArticlesForPage will be used to get the articles for a page that we have already visited. We will create the logic behind it in the next code snippet.

The function Articles presents a React component that will show all the loaded articles and the pagination.

Inside of the App, we are rendering the component Articles where we are passing the current page, the articles for the current page that we got by using getArticlesForPage, the method to set the current page and the total pages.

If you want, for practice, you can create a separate Pagination component where you will pass the current page, method to set the current page and total pages. That way, you can separate some logic even more and make it much less complex.

Retrieving Cached Articles for a Page

Let’s now define the function getArticlesForPage.

We first check if the page we request articles from is cached. If it is not, we return an empty array. The same output is in case there are no articles provided.

If we have some cached articles, we will go over the IDs that are cached for the requested page, find the articles by that ID and push it in the array of articles.

At the end, we return an array with filled articles objects.

Displaying Articles and Pagination

Let’s now define the function/component Articles which is used to show the articles and the pagination.

We check the TotalPages property and create a button for each page. This button will call the method (state method) to set the current page to that page.

After that, we iterate through the array of articles and create an article for each of them with some information. To see most of the data you can get, you can check the schema here.

Then, we render both the articles and the pagination.

Fetching the Posts from our Blog

To fetch the posts from our blog, we will use the useEffect hook. We will provide dependencies to that hook so when one of those change, it will process the code again.

First, we have to check if we are already loading the posts. If we are, we won’t go further. The same goes if we already have the articles for the current page.

If we load the posts, we check for the headers. If we did not already set the total pages, we read the headers and set that to the state as well.

After that, we are merging the newly loaded articles with the old ones. We are also saving article IDs to the new page for caching purposes.

Now, if you try to go to a different page, you will see a show loading. But if you go back to another page and come back to the same page, there will be no loading.

Code

The code here is the same as in the above examples. Once you unzip it, be sure to place yourself inside of the folder with the terminal (command prompt) and run npm install.

Conclusion

Loading the posts is really easy since WordPress REST API does the most work for you. But in case you wanted shortcodes to be run as well, you would need to create a custom REST API for loading posts that have shortcodes processed.

In the next tutorial, we will add the React Router and display each Article on its own page.

Become a Sponsor