So previously I have used invalidateQueries for useMutation when I make changes, so component A update will reflexed in component B. However, due to some request I need to changed to new refetch strategy such as refetchInterval: 1000 * 60 * 10, now I found this is in conflict with invalidateQuery, as if the component A changes, for a split second it will display the new change, but it soon reverts back to the old data, unless you refresh the page. Is it possible to "overwrite" the refetch by having the invalidation still working as before?
#How to use both invalidateQuery and refetchInterval?
knotty gazelle
lilac meteor
Which version are you on?
knotty gazelle
"@tanstack/react-query": "^4.16.1",
"@tanstack/react-query-devtools": "^4.16.1",
btw, most of them also has refetchOnWindowFocus: false, I am not sure if it's related, but I'd like to think not...
knotty gazelle
should I update to v5 instead?
knotty gazelle
it seems V5 has quite some changes... maybe it's worth spending some time to refactor it soon....
one thing I am not sure is, now the OnSuccess is removed, how about the logic where I need to write
if (res.status === 204) {bla bla}
previously I've been written it within onSuccess block?
lilac meteor
what were you doing in that callback exactly? Have you seen the blogpost as to why we are removing it?
https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose
knotty gazelle
basically:
if res.status = 204, I will need to display some message
if res.status=200, I will set the state for many input fields (populate values from backend)
if res.status = 401 I will need to refetch the token
if res.status = other errors, I will need to display the error message...
exactly what I am doing...
lilac meteor
- status 401 should be handled on your request layer (axios or whatever)
- 204, display some message is an
ifstatement in your jsx? - 200, don't reset state, that might overwrite user input. instead, derive it, or pass it as props to a separate component (see: https://tkdodo.eu/blog/react-query-and-forms)
- other errors: display messages is also just a branching in your jsx
knotty gazelle
Ok, I will give those a thorough reads and update to V5 instead...
knotty gazelle
I've updated to
"@tanstack/react-query": "^4.29.5",
"@tanstack/react-query-devtools": "^4.29.5",
however the problem still remains. In useMutation I do the invalidate query in onSuccess block, then the changes will revert back to previous data, until I refresh. Shouldn't it work as, after I do the invalidation the useQuery should make a call again to fetch the new data?
I've since remove the refetchInterval and refetchOnWindowFocus: false, just trying with default values.
seems to work only if I remove queryClient.invalidateQueries({queryKey: ['data']}); in my useMutation call.... but you said this should be used in the other post.
knotty gazelle
i don't know what happened, but this is really odd:
so I have a form, and I set the value in useQuery's onSuccess block, first I have old value populated (useQuery calls once), then I change to new value, do useMutation with invalidateQueries, then the useQuery calls again, now it resets the form to the OLD VALUE.... really don't know why it behaves like this.
knotty gazelle
@lilac meteor sorry to bother you, any idea why thequeryClient.invalidateQueries({queryKey: ['data']}); is not working as expected?
knotty gazelle
I will hold on to v5 until it's official I guess... might be a bad idea for prod. Although I have no idea why the current invalidateQueries don't work, it feels like it doesn't trigger refetch if I put it in onSuccess in useMutation. If I push the button on the Devtool (the invalidate) it will still refetch as expected....
knotty gazelle
I've done more tests:
- some endpoints works as expected. Use both refetchInterval and invalidateQueries seem to work as expected.
- some endpoints don't, the problem is as above described. I still haven't found out why. The only difference is those endpoints somehow end with
json, but I don't see why it should cause any issue as it's a normal axios call.