Creating the list page

In this first section, we will create the list page to show cars with paging, filtering, and sorting features:

1. Run your unsecured Spring Boot backend. The cars can be fetched by sending the GET request to the http://localhost:8080/api/cars URL, as shown in Chapter 4, Creating a RESTful Web Service with Spring Boot. Now, let’s inspect the JSON data from the response. The array of cars can be found in the _embedded.cars node of the JSON response data:

Figure 13.1: Fetching cars

2. Open the carfront React app with Visual Studio Code (the React app we created in the previous chapter).
3. We are using React Query for networking, so we have to initialize the query provider first.

You learned the basics of React Query in Chapter 10, Consuming the REST API with React.

The QueryClientProvider component is used to connect and provide QueryClient to your application. Open your App.tsx file and add the...