React-query: When mutate after an action, to want to get the request list, use queryCache. RefetchQueries or queryCache. InvalidateQueries list update, but did not make the list updates.Neither approach works

[tianleiyiji123]

`
export const useTouchListComplate = () => {

const [mutate] = useMutation((options: any) => {
return fetch(${DOMAIN.BIBLE_INSPIRE}${PATH.WORKBENCH.API_LIST_COMPLATE}, {
method: 'POST',
body: objToParam({
deptcode: options.deptcode,
list_code: options.list_code
})
})
}, {
onSuccess: (data: any, param: any) => {
console.log(data)
queryCache.refetchQueries(${DOMAIN.BIBLE_INSPIRE}${PATH.WORKBENCH.API_TABLE_EACH_DATA}/${param.tabId}, {
active: true
})
}
})
return [
mutate
]
}
`

[TkDodo]

Not sure I got the question right, but here are some approaches to what I _think_ you want to achieve that have been working well for me:

1) After mutation, just invalidate the query cache for your key. The next time a component renders that needs that data, it will be re-fetched.

You can see this working in this example: https://react-query.tanstack.com/docs/examples/optimistic-updates

especially this part:

// After success or failure, refetch the todos query
onSettled: () => {
    cache.invalidateQueries('todos')
},

2) alternatively, if your mutation returns the result, you can just put it in the query cache. I will stick with the todos example:

useMutation(
    text => axios.post('/api/data', { text }),
    {
      onSuccess: (allTodos) => {
        cache.setQueryData('todos', allTodos)
      },
    }

this approach will manually update the cache with the data from the server, so it will not re-fetch it. This is useful if, like in my example, your server already returns the new data as a result of the mutation request.

[tianleiyiji123]

Thanks, but my problem is that when cache.invalidatequeries ('todos') ends, no todos is requested.My understanding is that the invalidateQueries method will trigger the request for the list and the useQuery rerender page, but it doesn't work.I don't know if there is a problem with my global configuration. Here is my global configuration:

`

const queryConfig = {
queries: {
suspense: true,
// queryKeySerializerFn: defaultQueryKeySerializerFn,
enabled: true,
retry: 3,
staleTime: 0,
cacheTime: 5 * 60 * 1000,
refetchOnWindowFocus: false,
refetchInterval: Infinity
// refetchOnMount: true
// onError: noop,
// onSuccess: noop,
// onSettled: noop,
// useErrorBoundary: false, // falls back to suspense
}
}
`

[TkDodo]

Since you have suspense set to true, maybe this is a duplicate of https://github.com/tannerlinsley/react-query/issues/1065 ?

[tianleiyiji123]

Thank you very much.That's true.But are these because of the suspense and invalidateQueries conflict?How do you handle UI State management in your projects

[TkDodo]

But are these because of the suspense and invalidateQueries conflict?

Personally, I haven't used suspense yet, so I haven't experienced any problems

[Tooluloope]

I have this issue as well. Use query fetches the data for my table, but once I make an action on the table within the same component, the query doesn't refetch, is it because the component doesn't rerender when I make the mutation?

[tannerlinsley]

This is a bug that we are now tracking in #1065