Quartz 🪬

Updating Cache Manually in React Query

1 min read

Giả sử mutation updateProductPriceMutation trong component bên dưới có sử dụng phương thức invalidateQueries để triển khai automated re-fetching.

function App() {
  // ...
  const product = productQuery.data
  return (
    <>
      <div>
        <h2>{product.name}</h2>
        <p>${product.price}</p>
      </div>
      <button disabled={updateProductPriceMutation.isLoading} onClick={handleClick}>
        Random a new price
      </button>
    </>
  )
}

Khi mutation được xử lý xong, giá trị của product.price chưa được cập nhật ngay do cần phải chờ thực hiện re-fetching.

Để cập nhật cache ngay lập tức sau khi mutation được xử lý xong, ta có thể sử dụng phương thức setQueryData của queryClient:

onSuccess: (data) => {
  queryClient.setQueryData(["products", productId], data)
  queryClient.invalidateQueries(["products", productId])
}

Đối số thứ hai của setQueryData cũng có thể là một callback. Đối số của callback này là dữ liệu cũ của cache:

onSuccess: (data) => {
  queryClient.setQueryData(["products", productId], (oldData) => {})
  queryClient.invalidateQueries(["products", productId])
}

Lưu ý: không được mutate dữ liệu cũ của cache khi dùng callback như trên.

Resources

Backlinks