Tại sao phải dùng react-query?

Trước đây, để fetch dữ liệu từ server thì có nhiều cách. Một số cách phổ biến là sử dụng useEffect và useState hay sử dụng thư viện quản lí state (Redux).

const Component = () => {
	const [data, setData] = useState(null);
    
    useEffect(() => {
		const getData = async () => {
			const response = await fetch("https://example.com/api").then(response => response.json);
      setData(response)
		}
      getData()
	})
    
    return (
		// Some JSX here
	)
}

Cách này hoạt động ổn, tuy nhiên lại khá là rườm rà. Phải viết 1 đống code chỉ để lấy dữ liệu từ server và hiện ra cho người dùng.

Sử dụng react-query

react-query cung cấp nhiều hooks với API cực kì đơn giản để fetch cũng như update dữ liệu từ server. Hỗ trợ sẵn caching, refetching và nhiều thứ khác.

Đầu tiên ta sẽ tìm hiểu cách để fetch dữ liệu sử dụnguseQuery

useQuery

Để sử dụng hook useQuery, ta phải truyền ít nhất 2 tham số:

• Tham số đầu tiên là queryKey
• Tham số thứ 2 là hàm trả về 1 promise:
• Tham số thứ 3 là các options (ta sẽ tìm hiểu ở bên dưới).

Sau đây là ví dụ sử dụng useQuery cơ bản.

const Component = () => {
	const { data, isLoading, isError } = await useQuery('todo', 
	() => fetch('https://example/api/todo').then(response => response.json()))
    if (isLoading) {
		return (
        	// Loading JSX
        )
	}

    if (isError) {
		return (
			// Error JSX
		)
	}

    return (
		// Some JSX here
	)
}

useQuery trả về những thông tin cần thiết như data, isLoading hay isError. (Bạn có thể xem thêm một số thông tin khác ở đây)

useMutation

useMutation khác với useQuery, được sử dụng để tạo/thay đổi/xóa dữ liệu ở. (CUD)

Để sử dụng hook useMutation, ta phải truyền ít nhất 1 tham số:

• Tham số thứ nhất là hàm trả về 1 promise:
• Tham số thứ 2 là các options (ta sẽ tìm hiểu sau).

Cũng như useQuery, useMutation trả về những thông tin cần thiết như isLoading hay isError. (Bạn có thể xem thêm một số thông tin khác ở đây).

Tuy nhiên, useMutation lại trả về mutate thay vì data (như ví dụ trên). Khi gọi hàm mutate thì hàm số đầu tiên của useMutation sẽ được gọi.