如何从反应突变中无效？

发布于 2025-01-24 01:45:13 字数 1186 浏览 0 评论 0 原文

我正在尝试删除特定数据，该数据应在另一个API中的发布请求后进行更新。值得一提的是，根据该请求，两个API应该更新，其中一个是更新，另一个不更新。

我已经尝试了多种方法来根据成功的POST请求来撤离API，但似乎没有用。
我也尝试添加这样的第二个选项，但没有成功。

 {
   refetchInactive: true,
   refetchActive: true,
 }

如此讨论，也许“键不匹配，因此您试图使缓存中不存在的东西无效。” ，但不确定这是我的情况。

更有趣的是，单击Devtools中的无效按钮，无效本身可以使用。

突变功能：

import { BASE_URL, product1Url, product2Url } from './services/api'
import axios from 'axios'
import { useMutation, useQueryClient } from 'react-query'

export const usePostProduct3 = () => {
  const queryClient = useQueryClient()

  const mutation = useMutation(
    async (data) => {
      const url = `${BASE_URL}/product3`
      return axios.post(url, data).then((response) => response)
    },
    {
      onSuccess: async (data) => {
        return (
          await queryClient.invalidateQueries(['prodKey', product1Url]), //this one doesn't work
          queryClient.invalidateQueries(['prodKey', product2Url]) //this api refetch/update works
        )      },
    },
  )

  return mutation
}

我在做什么错？

原文

I am trying to refetch a specific data, which should update after a post request in another API. It's worth mentioning that based on that request two APIs should update and one of them updates, another one not.

I've tried multiple ways to refetch the API based on successful post request, but nothing seems to work.
I tried to also add 2nd option like this, but without success.

 {
   refetchInactive: true,
   refetchActive: true,
 }

As it mentioned in this discussion,
maybe "keys are not matching, so you are trying to invalidate something that doesn't exist in the cache.", but not sure that it's my case.

What is more interesting is that clicking the invalidate button in the devtools, the invalidation per se works.

Mutation function:

import { BASE_URL, product1Url, product2Url } from './services/api'
import axios from 'axios'
import { useMutation, useQueryClient } from 'react-query'

export const usePostProduct3 = () => {
  const queryClient = useQueryClient()

  const mutation = useMutation(
    async (data) => {
      const url = `${BASE_URL}/product3`
      return axios.post(url, data).then((response) => response)
    },
    {
      onSuccess: async (data) => {
        return (
          await queryClient.invalidateQueries(['prodKey', product1Url]), //this one doesn't work
          queryClient.invalidateQueries(['prodKey', product2Url]) //this api refetch/update works
        )      },
    },
  )

  return mutation
}

What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

堇年纸鸢 2025-01-31 01:45:13

几年后，正确的答案是使用 reset 函数。

mutation.Reset（）

回复收藏 0 原文

桃气十足 2025-01-31 01:45:13

您会这样做

onSuccess:(response)=>{
queryClient.setQueryData("your query key",response.data)

}

，或者如果您只想使查询无效

import {querCache} from "react-query"
   ...
    onSuccess:(response)=>{
        queryClient.invalidateQueries("your query key")
  
        queryClient.invalidateQueries("your query key")

       //you also can refetch data like this
        queryCache.refetchQueries("your query key")

        }

You shold do it like this

onSuccess:(response)=>{
queryClient.setQueryData("your query key",response.data)

}

Or if you just want to invalidate queries

import {querCache} from "react-query"
   ...
    onSuccess:(response)=>{
        queryClient.invalidateQueries("your query key")
  
        queryClient.invalidateQueries("your query key")

       //you also can refetch data like this
        queryCache.refetchQueries("your query key")

        }

回复收藏 0 原文

~没有更多了~