Automated Re-fetching in RTK Query

Quá trình đồng bộ lại local cache data sau khi gửi mutation request được gọi là revalidate. RTK Query sử dụng các hệ thống “cache tag” để tự động re-fetch các query endpoint mà có dữ liệu bị thay đổi bởi các mutation endpoint.

Cơ chế như sau: query endpoint cung cấp một số tag tương ứng với cache data của nó. Khi một mutation endpoint vô hiệu hóa các tag mà query endpoint đã cung cấp thì cache data của query endpoint đó sẽ được tải lại hoặc bị xóa (khi không có component nào sử dụng cache data đó nữa).

Tags

Là tên đặt cho các tập dữ liệu cụ thể để kiểm soát quá trình caching và invalidation.

Định nghĩa các tag type thông qua thuộc tính tagTypes khi tạo API slice.

export const sneakerApi = createApi({
  // ...
  tagTypes: ["Sneakers"],
  // ...
})

Mỗi tag riêng lẻ là một object bao gồm hai thuộc tính:

• type: tên của tag type dưới dạng chuỗi.
• id (optional): id của tag, có thể là số hoặc chuỗi.

Ví dụ tag không có ID:

"Sneakers"

Ví dụ tag có ID:

{ type: "Sneakers", productId: 1 }

Providing Tags

Một query endpoint có thể gắn các tag với cache data của nó bằng cách sử dụng thuộc tính provideTags.

Ví dụ:

getSneakers: builder.query({
  query: () => ({
    url: `products`,
  }),
  providesTags: ["Sneakers"],
})

Thuộc tính providesTags có thể là các giá trị sau đây:

• Mảng các tag không có ID, chẳng hạn ["Sneakers"]
• Mảng các tag có ID, chẳng hạn [{ type: "Sneakers", productId }]
• Một callback trả về mảng các tag.

Ví dụ, endpoint bên dưới có giá trị của thuộc tính providesTags là một callback trả về mảng các tag:

getSneakerById: builder.query({
	query: (productId) => ({
		url: `products/${productId}`
	}),
	providesTags: (result, error, productId) => [
		{ type: "Sneakers", productId }
	]
}),

Nếu providesTags là một callback thì đối số thứ ba của nó sẽ là đối số được truyền vào useQuery. Cần chú ý rằng result hoặc error có thể là undefined tùy thuộc vào việc query có thành công hay không.

Invalidating Tags

Một mutation endpoint có thể vô hiệu hóa các cache data nào đó dựa trên các tag đã được cung cấp bởi các query endpoint thông qua thuộc tính invalidateTags.

Ví dụ:

addSneaker: builder.mutation({
  query: (sneaker) => ({
    url: `products`,
    method: "POST",
    body: sneaker,
  }),
  invalidatesTags: ["Sneakers"],
})

Thuộc tính invalidatesTags cũng có miền giá trị tương tự như providesTags. Tuy nhiên, nếu giá trị của invalidateTags là một callback thì đối số thứ ba của nó sẽ là đối số truyền vào mutation trigger.

Ví dụ:

updateSneaker: builder.mutation({
  query: ({ productId, ...sneaker }) => ({
    url: `products/${productId}`,
    method: "PUT",
    body: sneaker,
  }),
  invalidatesTags: (result, error, { productId }) => [{ type: "Sneakers", productId }],
})

Resources

• Automated Re-fetching