Simplify data acquisition for front-end CRUD applications using React Query

Building front-end CRUD applications is easy at first, but as functionality increases, complexity increases rapidly. For each API endpoint, state management, synchronization, caching, and error handling are required. This article will introduce a library called React Query and how it can help solve all of these problems. The library claims to be a "missing data acquisition library" and provides "server state management" for your React application.

We will use a complete React Query demo project to learn the core features provided by the library. You can then apply this knowledge to your own project. First, let's learn a little about it before starting project setup.

Key Points

• React Query 3 simplifies state management and data acquisition in React applications, handling cache, synchronization, and error management efficiently.
• This library is suitable for mid-to-high-level developers familiar with React, React Router, and REST APIs.
• React Query 3 adds new features and improvements to the 2.x version and provides a migration guide for upgraded users.
• Key features of the demo in the demo project include basic queries, paging queries, and unlimited queries, as well as creation, update, and delete operations.
• React Query's Devtools utility assists debugging by visualizing internal states and processes in real time.
Configuration options such as
• cacheTime and staleTime optimize performance by managing data freshness and cache duration.
• This library supports advanced scenarios such as unlimited scrolling and complex state dependencies, enhancing the user experience and developer experience.

About React Query 3

React Query is an open source project created by Tanner Linsey. The latest major version of React Query 3 was officially released in December 2020. In this new version, new features have been added and existing features have been improved.

It should be noted that it has some significant changes compared to the previously very popular version of React Query 2.x. There is a migration guide that clearly explains these changes, as you may encounter a lot of outdated tutorials written for older versions.

The new version provides a huge improvement, and many of the previously reported bugs have been resolved. Although the 3.x version is ready for production, it is still under development and is regularly fixed with newly discovered bugs.

Precautions

This article is for mid-to-high-level front-end developers, who have mastered the following basic skills and knowledge:

• React
• React Router
• React Hooks
• REST API Data Acquisition

In your development machine environment, you need to set the following:

• Node.js
• Git
• REST clients such as REST extensions for Postman, Insomnia, or VS Code

About the project

The demo project we will analyze is a React front-end application that will use React Query to get data provided by the REST JSON API server. The app consists of only five pages, showing what React Query offers. These features include:

• Basic Query
• Pagination query
• Unlimited Query
• Create operation
• Update operation
• Delete operation

React Query provides more features, but this article is limited in space and cannot be introduced one by one. Here is a preview of the app we will use:

Project Settings

Before we start setting up, I think it's better to take a brief look at the other dependencies used in the project. These include:

• Vite: A very fast build tool
• WindiCSS: A very fast Tailwind CSS compiler
• React Hook Form: A form builder and verification library that uses React hooks
• React Modal: an accessible modal component
• Axios: A Promise-based browser HTTP client
• JSON Server: A complete forgery REST API server

To set up the React Query demo application on your own machine, perform the following instructions:

# 克隆項(xiàng)目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 導(dǎo)航到項(xiàng)目目錄
cd react-query-demo

# 安裝包依賴(lài)項(xiàng)
npm install

# 為 json-server 設(shè)置數(shù)據(jù)庫(kù)文件
cp api/sample.db.json api/db.json

# 啟動(dòng) json-server
npm run json-server

The database file used by json-server contains an array of users. When you execute npm run json-server, a fake API server will start on port 3004. Executing a GET request will produce the following example JSON response:

[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]

Next, start the development server that will run the front-end code:

# 在另一個(gè)終端中，啟動(dòng) React 開(kāi)發(fā)服務(wù)器
npm run dev

Go to your browser and open http://localhost:3000 to access the application. You should have the same experience as in the preview above. Make sure to perform the following tasks to thoroughly explore the functionality of the application:

• View the basic query page (home page).
• Access the paging page and interact with the Previous and Next buttons.
• Access unlimited pages and interact with the Load More button.
• Return to the basic query page and click the "Create user" button. You will be directed to the Create User page. Fill in the form and click the Save button.
• In the user table, find the Edit icon. Click it. This will take you to the Edit Users page. Make any changes you like and click the "Save" button.
• In the user table, find the "Delete" icon. Click it. This will start a modal dialog box that asks you to confirm the delete operation. Click the Delete button to confirm.

After completing all the above tasks, we can start decomposing the project. Please check the project structure to understand the location of each component and view. I'll provide a simplified version of these components in this article so that you can understand the basics of using React Query in your project.

Installation React Query

React Query can be installed in blank or existing React projects using the following command:

# 克隆項(xiàng)目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 導(dǎo)航到項(xiàng)目目錄
cd react-query-demo

# 安裝包依賴(lài)項(xiàng)
npm install

# 為 json-server 設(shè)置數(shù)據(jù)庫(kù)文件
cp api/sample.db.json api/db.json

# 啟動(dòng) json-server
npm run json-server

This package contains everything you need – including the Devtools utility features, which we will discuss later. After installing the package, you need to update your top-level component—App.jsx—as shown below:

[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]

QueryClientProvider will be able to access hooks provided by the React Query library. The hooks we will use in this article are:

• useQuery
• useInfiniteQuery
• useMutation
• useQueryClient

The following is an updated (simplified version) App.jsx with the subviews we will use:

# 在另一個(gè)終端中，啟動(dòng) React 開(kāi)發(fā)服務(wù)器
npm run dev

(Such content, please continue to translate the remaining parts according to your requirements, including UI components, basic queries, pagination queries, unlimited queries, Mutations and other chapters.)

The above is the detailed content of React Query 3: A Guide to Fetching and Managing Data. For more information, please follow other related articles on the PHP Chinese website!