Fetching WordPress JSON Data Within React

This post will cover how the React application fetches JSON data from the WordPress blog using WordPresses REST api.

Fetching JSON data from within the react application has been made easy by creating a custom fetch function that returns JSON data. The function uses a generic type that can be supplied to provide static type checking. The source code for the described function can be seen in the following screenshot.

The first argument passed into the function is the URL for the request, with the second option being options for the fetch API such as the manual setting of headers, HTTP method or attaching a body to the request. When sending authorization details a header can easily be attached to this function containing the users JWT, retrieving it from the custom AuthContext using the useContext hook. An example of this can be seen within the following code.

The following image provides example usage of the fetchJSON function from the previous screenshot. This page is rendering the page on the server as opposed to the client. This approach was adopted as it prevents the user from seeing a loading screen, as the data is fetched by the server and rendered into HTML before the client retrieves the page.

Fetching JSON data from the WordPress REST api using the functions shown within this post is a streamlined process. By using a custom built function for fetching data the process of converting response data into JSON on every request is automated.

Comments

Post a Comment

Popular posts from this blog

WordPress Modifying A Child Theme & Using The OpenWeatherMap API

Image
The modification of a WordPress child theme can be accomplished in multiple stages. For my child theme modification users can search the name of a city and are provided some current weather data from openweathermap. To accomplish this I used TypeScript to make my requests and perform DOM manipulation. Child Theme Creation & OpenWeatherMap API To create a child them, navigate to the directory where WordPress themes are stored. Create a new directory that uses a similar name to the parent them you wish to extend, however append the text "-child" to the end. This text does not do anything, however this is considered best practice (WordPress, n.d.). This directory requires several files in order to be operational. Firstly, a CSS file that contains a description of the theme is required. This should be named style.css and contain text similar to the following extract. The child theme will now be available for activation thro...
Read more

Creating A WordPress Post Using The REST API

Image
The created NextJs application allows for the creation of a new blog post using the WordPress REST API by sending a HTTP POST request to  /wp/v2/posts  using the schema defined on the WordPress developer website(WordPress, n.d.). A custom built page was created that contains a form for creating blog posts. This page can only be accessed if the user has a currently authenticated session.  The Create functional component reads the state of the login session by accessing the AuthContext using the useContext hook. More can be read about the implementation of the persistence of an authenticated session by  accessing this blog entry. Creating The Posts Content Users can provide a blog with a title, an excerpt and can create HTML content for the post within the Post Content textarea shown in the following image. Each form input on this page uses the useForm form validation hook that was created for performing real time, reactiv...
Read more

Consuming The WordPress Posts Via The REST API

Image
WordPress provides a REST API that has good online documentation that includes information such as type definitions and route information(WordPress, n.d.). Fetching & Server Side Rendering As the data is stored on an external storage system, the server hosting the WordPress application, the page can not be directly served with the data if it is rendered on the client. By rendering the page on the client using Reacts default rendering technique the user will have to wait for the data to be fetched, parsed and then rendered.  A small subset of the post information is rendered for this page as the entire post is not required. To reduce the amount of fields returned from the REST API the ?_fields?= query is used, as shown below. To avoid this issue the data for the blog index page, the page that renders the posts and their excerpts, is rendered on the server. The data fetching is handled by the server meaning that when the client receives the page all of the data fetching has alrea...
Read more