Tanstack Query, AKA React Query, là một thư viện phổ biến để tìm nạp dữ liệu trong các ứng dụng React. React Query đơn giản hóa quá trình tìm nạp, lưu vào bộ đệm và cập nhật dữ liệu trong các ứng dụng web. Bài viết này sẽ thảo luận về việc sử dụng React Query để xử lý việc tìm nạp dữ liệu trong ứng dụng React.
Cài đặt và Thiết lập Truy vấn React
Bạn có thể cài đặt React Query bằng npm hoặc yarn. Để cài đặt nó bằng npm, hãy chạy lệnh sau trong terminal của bạn:
npm i @tanstack/react-query
Để cài đặt nó bằng sợi, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn:
yarn add @tanstack/react-query
Sau khi cài đặt thư viện React Query, bạn bọc toàn bộ ứng dụng trong Truy vấn ClientProvider thành phần. Các Truy vấn ClientProvider thành phần bao bọc toàn bộ ứng dụng của bạn và cung cấp một thể hiện của truy vấn khách hàng cho tất cả các thành phần con của nó.
Các truy vấn khách hàng là phần trung tâm của React Query. Các truy vấn khách hàng quản lý tất cả logic tìm nạp và lưu trữ dữ liệu. Các Truy vấn ClientProvider thành phần lấy truy vấn khách hàng như một chỗ dựa và cung cấp nó cho phần còn lại của ứng dụng của bạn.
Để tận dụng Truy vấn ClientProvider và truy vấn khách hàng trong ứng dụng của bạn, bạn phải nhập chúng từ @tanstack/truy vấn phản ứng thư viện:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getEementd('root')).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</React.StrictMode>
)
Hiểu về useQuery Hook
Các sử dụngTruy vấn hook là một chức năng được cung cấp bởi thư viện React Query, lấy dữ liệu từ máy chủ hoặc API. Nó chấp nhận một đối tượng với các thuộc tính sau: truy vấnKey (khóa của truy vấn) và truy vấnFn (một chức năng trả về một lời hứa giải quyết dữ liệu bạn muốn tìm nạp).
Các truy vấnKey xác định truy vấn; nó phải là duy nhất cho mỗi truy vấn trong ứng dụng của bạn. Khóa có thể là bất kỳ giá trị nào, chẳng hạn như chuỗi, đối tượng hoặc mảng.
Để tìm nạp dữ liệu bằng cách sử dụng sử dụngTruy vấn hook, bạn cần nhập nó từ @tanstack/truy vấn phản ứng thư viện, vượt qua một truy vấnKey và sử dụng truy vấnFn để lấy dữ liệu từ một API.
Ví dụ:
import React from 'react';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
function Home() {
const postQuery = useQuery({
queryKey: ['posts'],
queryFn: async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
const data = await response.data;
return data;
}
})
if( postQuery.isLoading ) return ( <h1>Loading....</h1>)
if( postQuery.isError ) return (<h1>Error loading data!!!</h1>)
return (
<div>
<h1>Home</h1>
{ postQuery.data.map( (item) => ( <p key={item.id}>{item.title}</p>)) }
</div>
)
}
export default Home;
Các sử dụngTruy vấn hook trả về một đối tượng chứa thông tin về truy vấn. Các postQuery đối tượng chứa đang tải, isErrorVà isSuccess Những trạng thái. Các đang tải, isErrorVà isSuccess các trạng thái quản lý vòng đời của quá trình truy xuất dữ liệu. Các postQuery.data thuộc tính chứa dữ liệu được tìm nạp từ API.
Các đang tải trạng thái là một giá trị boolean cho biết truy vấn hiện đang tải dữ liệu hay không. Khi mà đang tải trạng thái là đúng, truy vấn đang được tiến hành và dữ liệu được yêu cầu không có sẵn.
Các isError trạng thái cũng là một giá trị boolean cho biết liệu có xảy ra lỗi trong quá trình truy xuất dữ liệu hay không. Khi isError là đúng, truy vấn không thể truy xuất dữ liệu.
Các isSuccess trạng thái là một giá trị boolean cho biết truy vấn đã truy xuất dữ liệu thành công hay chưa. Khi isSuccess là đúng, bạn có thể hiển thị dữ liệu đã truy xuất trong ứng dụng của mình.
Lưu ý bạn có thể truy cập truy vấnKey sử dụng truy vấnFn. Các truy vấnFn lấy một đối số duy nhất. Đối số này là một đối tượng chứa các tham số cần thiết cho yêu cầu API. Một trong những thông số này là truy vấnKey.
Ví dụ:
useQuery({
queryKey: ['posts'],
queryFn: async (obj) => {
console.log( obj.queryKey );
}
})
Xử lý dữ liệu cũ
Truy vấn phản ứng cung cấp nhiều cách để xử lý dữ liệu cũ. Thư viện React Query đảm bảo tự động tạo yêu cầu tìm nạp mới cho API của bạn khi dữ liệu đã tìm nạp trở nên cũ. Điều này đảm bảo rằng bạn liên tục hiển thị dữ liệu cập nhật nhất.
Bạn có thể kiểm soát tốc độ trở nên cũ của dữ liệu và khoảng thời gian giữa mỗi yêu cầu tìm nạp tự động bằng cách sử dụng thời gian cũ Và refetchInterval tùy chọn. Các thời gian cũ tùy chọn là thuộc tính chỉ định số mili giây mà dữ liệu được lưu trong bộ nhớ cache hợp lệ trước khi trở nên cũ.
Các refetchInterval tùy chọn là thuộc tính chỉ định số mili giây giữa mỗi yêu cầu tìm nạp tự động của thư viện React Query.
Ví dụ:
useQuery({
queryKey: ['...'],
queryFn: () => {...},
staleTime: 1000;
})
Trong ví dụ này, các thời gian cũ là 1000 mili giây (1 giây). Dữ liệu được tìm nạp sẽ trở nên cũ sau 1 giây và sau đó thư viện React Query sẽ thực hiện một yêu cầu tìm nạp khác tới API.
Ở đây bạn sử dụng refetchInterval tùy chọn để kiểm soát khoảng thời gian giữa mỗi yêu cầu tìm nạp tự động:
useQuery({
queryKey: ['...'],
queryFn: () => {...},
refetchInterval: 6000;
})
Các refetchInterval là 6000 mili giây (6 giây). Truy vấn React sẽ tự động kích hoạt yêu cầu tìm nạp mới để cập nhật dữ liệu được lưu trong bộ nhớ cache sau 6 giây.
Hiểu việc sử dụngMuting Hook
Các sử dụng Đột biến hook là một công cụ mạnh mẽ trong thư viện React Query. Nó thực hiện các đột biến hoạt động không đồng bộ, chẳng hạn như tạo hoặc cập nhật dữ liệu trên máy chủ. Sử dụng sử dụng Đột biến hook, bạn có thể dễ dàng cập nhật trạng thái ứng dụng và giao diện người dùng dựa trên phản hồi của đột biến.
Dưới đây, chúng tôi đã tạo một Thêm bài đăng thành phần hiển thị biểu mẫu có trường nhập liệu và nút gửi. Thành phần biểu mẫu này sẽ sử dụng hook useMutation để cập nhật trạng thái:
import React from 'react'
function AddPost() {
const[post, setPost] = React.useState({
title: ""
})
function handleChange(event) {
setPost( (prevState) => ({
...prevState,
[event.target.name]: event.target.value
}) )
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder='Add Title'
name='title'
onChange={handleChange}
value={post.title}
/>
<button>Add Post</button>
</form>
)
}
export default AddPost;
Bên trong Thêm bài đăng thành phần là một trạng thái bưu kiện phục vụ như một đối tượng với một thuộc tính, tiêu đề.
Các xử lýThay đổi chức năng cập nhật trạng thái bưu kiện bất cứ khi nào người dùng nhập vào các trường đầu vào. Sau khi tạo Thêm bài đăng thành phần, chúng tôi nhập khẩu sử dụng Đột biến hook và sử dụng nó để cập nhật API.
Ví dụ:
import { useMutation } from '@tanstack/react-query'
import axios from 'axios';
const newPostMutation = useMutation({
mutationFn: async () => {
const response = await axios.post('<https://jsonplaceholder.typicode.com/posts>', {
title: post.title,
});
const data = response.data;
return data;
}
})
Các sử dụng Đột biến hook xử lý yêu cầu HTTP để tạo bài đăng mới. Các bài đăng mớiĐột biến hằng số đại diện cho chức năng đột biến và các tùy chọn cấu hình của nó.
Các đột biếnFn là một chức năng không đồng bộ gửi yêu cầu POST đến điểm cuối API. Yêu cầu bao gồm một đối tượng chứa tiêu đề giá trị từ bưu kiện sự vật.
Để chạy đột biếnFnbạn sẽ cần phải gọi newPostMutation.mutate() phương pháp:
const handleSubmit = async (event) => {
event.preventDefault();
newPostMutation.mutate();
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder='Add Title'
name='title'
onChange={handleChange}
value={post.title}
/>
<button>Add Post</button>
</form>
)
}
Gửi biểu mẫu sẽ chạy xử lýGửi chức năng. Các xử lýGửi chức năng là một chức năng không đồng bộ kích hoạt chức năng đột biến newPostMutation.mutate().
Tìm nạp dữ liệu hiệu quả với truy vấn Tanstack
Bài viết này khám phá cách xử lý việc tìm nạp dữ liệu trong ứng dụng React bằng thư viện tanstack/reac-query.
Thư viện tanstack/reac-query cung cấp một công cụ mạnh mẽ và linh hoạt để tìm nạp và lưu trữ dữ liệu trong các ứng dụng React. Nó rất dễ sử dụng và khả năng lưu trữ của nó làm cho nó hoạt động hiệu quả và phản hồi nhanh.
Cho dù bạn đang xây dựng một dự án cá nhân nhỏ hay một ứng dụng doanh nghiệp mở rộng, thư viện tanstack/reac-query có thể giúp bạn quản lý và hiển thị dữ liệu một cách hiệu quả. Cùng với React, Next.js cũng cung cấp một số quy trình tích hợp sẵn và thư viện của bên thứ ba để xử lý việc tìm nạp dữ liệu.
.png "Chung kết Man City vs Inter Milan, Chung Kết C1 Phát Trên Kênh Nào?")
