Hello mấy ae bài viết là bài đầu tiên trong chuỗi React Query cùng TúPêVê nghen. Gét Gô thuiiii

TanStack Query là cái tên gọi mới hay có thể gọi React Query là thư viện giúp quản lý các state bất đồng bộ như data từ api

Nó có ưu điểm gì

Quản lý cache data và cập nhật cực kỳ đơn giản

Không dùng global state, reducer để quản lý, không khó hiểu như redux

Có khả năng tương thích và mở rộng với mọi use-case gặp trong thực tế

Vậy nó dùng gì để gọi api

Tanstack Query không đảm nhận việc gọi API, việc gọi API sẽ thực hiện thông qua các thư viện bạn dùng như axios, fetch API. Còn Tanstack Query chỉ đảm nhận việc quản lý data và trigger gọi api khi cần thiết thôi

Như cách thông thường mình dùng useEffect để call api thì sao hè. Mình vd đoạn code mẫu dưới nhé

const [students, setStudents] = useState([])
const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    setIsLoading(true)
    getStudents(page, limit)
      .then((res) => {
        setStudents(res.data)
      })
      .finally(() => {
        setIsLoading(false)
      })
  }, [])

Với cách này khá dài dòng chúng ta phải set đi set lại state rất là mệt. Còn với react query thì tương đối gọn hơn với code demo mẫu ở dưới

const { data, isLoading} = useQuery({
    queryKey: ['students', page],
    queryFn: () => getStudents(page, LIMIT)
})
//page đặt trong queryKey kiểu như devdependency trong useEffect vậy khi page thay đổi nó sẽ trigger chạy lại hàm getStudents cho chúng ta data mới

Thấy gọn quá hè, có được data, isLoading mà không cần phải cái useEffect dài dòng nữa =))

Query Key là gì : Nó là 1 cái key định danh cho cái query của mình và React Query nó sẽ quản lý việc query caching dựa trên Query keys của mình. Nó có thể là 1 mảng hoặc 1 số hoặc cái gì cũng được miễn sao để người khác nhìn vào biết được query của mình có nhiệm vụ gì

Query Functions: Nó là 1 function return về promise, promise này có thể return về resolve hoặc error