订阅缓存更新在反应查询中不起作用

Question

我确定这是用户错误。

因此，我的页面顶部有一个“产品”计数项。每当产品更新时，我都会将该“计数”增加 1。

因此，在一个页面中，在一个组件的深处，我有一个“添加产品”按钮。当我点击它时，我使用了一个突变。

export default function useProduct (id) {
  return useMutation(
    async () => {
      return await addproduct({ id })
    },
    {
      onSuccess:(data) => {
        const { products = {} } = data?.data;

        queryClient.setQueryData(['products'], {...products });
      },
     // NOT SURE WHAT THIS 'onMutate' does.. seems to do nothing
     // as the response comes AFTER this fires....
     onMutate: async products => {
        await queryClient.cancelQueries('products');

       /* previous */
       const previousProducts = queryClient.getQueryData('products')

       /* update */
       queryClient.setQueryData('products', products)

       // Return a context object to flow thu error if needed
       return { previousProducts }
  }
  )
}

现在，在这个顶部导航区域中，我正在尝试订阅此“更新”，这样我就可以获取“产品数量”以显示计数。

const mutationCache = new MutationCache()

const SomeComponent = () => {
   const callback = mutation => {
     console.log("=============== ", mutation)
   }

   const values = mutationCache.subscribe(callback)

我也试过“queryClient”，但它没有订阅，当我点击“添加产品”按钮时导航已经加载。

我也试过“QueryCache”，但是当我“添加产品”时它没有触发。所以，它没有订阅..我猜。

此时我正试图找回任何东西。我不能。

我也试过“useQuery”，但又一次，似乎没有从树下捕捉到观察到的更新。

Answer 1

// NOT SURE WHAT THIS 'onMutate' does.. seems to do nothing

onMutate 用于乐观更新。它被称为 before 请求被触发，这样您就可以乐观地更新您的缓存以获得即时 ui 反馈。 the docs here.

中对此进行了介绍

如果您想在从后端获得响应后更新缓存，请使用onSuccess回调。 the docs here.

中对此进行了介绍

Now, in this top nav area, I am trying to subscribe to this "update" so I can get at the "number of products" to display the count.

对于订阅，始终使用 useQuery。需要有一个检索所有产品的查询。例如，您可以使用 select 选项仅订阅您的产品数量：

const useProducts = (select) => useQuery('products', fetchProducts, { select })

const { data: products } = useProducts() // will contain all products const { data: nrOfProducts } = useProducts(data => data.length) // will only select the length of the array of products

订阅缓存更新在反应查询中不起作用

Subscribing to a cache update is not working in react-query

react-query