- vừa được xem lúc

React Query (phần 1)

0 0 27

Người đăng: khánh hoàng

Theo Viblo Asia

Xin chào các bạn, lại là mình đây, hôm này mình giới thiệu cho các bạn một package hữu ích khi làm việc với Reactjs

Chắc hẳn các bạn ai cũng từng gặp phải vấn đề khi làm việc với api. Có rất nhiều thứ các bạn phải suy nghĩ khi xử lý dữ liệu không đồng bộ, cập nhập data hay lưu data vào cache hoặc re-fetching lại khi có data mới.

Thì bây giờ các bạn không phải lo nghĩ điều đó nữa, khi mà đã có react-query lo điều đó cho bạn. Nó xử lý những điều đó một cách trơn tru, các bạn lên document của nó để đọc tiếp nhé, có rất nhiều thứ hay ho ?

OK! Vậy bây giờ mình và các bạn sẽ đi tìm hiều nó nhé.

Trước hết, nếu bạn nào đã cài reactjs rồi thì thôi, còn bạn nào chưa thì có thể chạy câu lệnh phía dưới để cài nhanh

npx create-react-app

Khi cài xong các bạn chạy thêm cho mình câu lệnh này nữa để cài đặt react-query

npm i --save react-query
Fetching the data

Đầu tiên, mình đi vào fetch data nhé. Các bạn mở file App.js lên và thay thế bằng đoạn code sau

import React from 'react';
import { useQuery } from 'react-query' const getPosts = async () => { const response = await fetch('endpoint api') return response.json()
} function App() { const { data, isFetching, isLoading, error, isError } = useQuery('key_unique', getPosts) if (isLoading) { return <div>loading...</div> // loading data } if (isError) { return <div>{error.message}</div> // error data } return ( <div> <ul> { data && data .slice(0,10) // only take frist 10 for now // render list of titles .map(d => <li key={`post-${d.id}`}>{d.title}</li>) } </ul> { isFetching && <p>updating...</p> } </div> )
} export default App

Đầu tiên, mình khai báo một hàm getPosts() để lấy data từ api về.

Trong hàm App() mình có sử dụng hook useQuery, nếu bạn nào chưa biết về hook thì có thể lên trang chủ đọc nhé tại đây

  • data: hook trả dữ liệu về cho mình qua biến data, các bạn dùng biến data để map dữ liệu của mình ra, data là key mặc định các bạn không thể refactor sang tên khác, nếu các bạn muốn đổi tên khác thì có thể viết như này { data: newName } và các key ở dưới cũng vậy.
  • isLoading: trả về trạng thái loading khi data đang load
  • isError: trả về lỗi khi fetch data về bị lỗi
  • error: sẽ trả về lỗi cho bạn
  • key_unique: đặc biệt là cái này. Mỗi một query sẽ có một key duy nhất, nên các bạn phải để ý là đặt key không được trung nhau
  • isFetching: Trông bất kỳ trạng thái nào, nếu có data mới thì sẽ trả về true

Trường hợp khi các bạn phải truyền cả params lên thì react-query cũng hỗ trợ cho các bạn

useQuery(['key', params1, params2], ...)

Ok, hôm nay chúng ta cần ngầm tưng đây vào đầu là được rồi, chậm mà chắc ?, còn các bạn nào thông minh thì lên trên document của nó đọc và làm theo những hàm mới của nó.

Bài viết của mình đến đây là dừng nhé. Hẹn các bạn ở bài tiếp theo, nếu mình có sai chỗ nào thì mong các bạn nhẹ tay góp ý cho mình. Cảm ơn các bạn đã đọc bài của mình ??

Bình luận

Bài viết tương tự

- vừa được xem lúc

Cùng tìm hiểu về các hook trong React hooks

Đối với ai đã từng làm việc với React thì chắc hẳn đã có những lúc cảm thấy bối rối không biết nên dùng stateless (functional) component hay là stateful component. Nếu có dùng stateful component thì cũng sẽ phải loay hoay với đống LifeCycle 1 cách khổ sở Rất may là những nhà phát triển React đã kịp

0 0 81

- vừa được xem lúc

Khi nào nên (và không nên) sử dụng Redux

. Công việc quản lý state với những hệ thống lớn và phức tạp là một điều khá khó khăn cho đến khi Redux xuất hiện. Lấy cảm hứng từ design pattern Flux, Redux được thiết kế để quản lý state trong các project JavaScript.

0 0 106

- vừa được xem lúc

ReactJS: Props và State

Nếu bạn đã học ReactJS hay React Native, bạn sẽ thấy các Props và State được sử dụng rất nhiều. Vậy chính xác chúng là gì? Làm thế nào để chúng ta sử dụng chúng đúng mục đích đây.

0 0 41

- vừa được xem lúc

State và Props trong Reactjs

Hello các bạn, tiếp tục seri tìm hiểu về ReactJs hôm nay mình xin giới thiệu đến các bạn hai thứ mình cho là thú vị nhất của ReactJs là State và Props. State bạn có thể hiểu đơn giản là một nơi mà bạn lưu trữ dữ liệu của Component, từ đó bạn có thể luân chuyển dữ liệu đến các thành phần trong Compon

0 0 36

- vừa được xem lúc

Memoization trong React

. 1.Introduction. Memoization có liên quan mật thiết đến bộ nhớ đệm, và dưới đây là một ví dụ đơn giản:. const cache = {}.

0 0 38

- vừa được xem lúc

Nâng cao hiệu suất React Hooks với React.memo, Memoization và Callback Functions

1.Ngăn Re-render và React.memo. React.

0 0 67