如何使 React-Query 突变失效？

Question

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?

Answer 1

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")

        }