How to use both invalidateQuery and refetchInterval?
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?9 Replies
fair-rose•3y ago
Which version are you on?
fair-roseOP•3y ago
btw, most of them also has
refetchOnWindowFocus: false, I am not sure if it's related, but I'd like to think not...
should I update to v5 instead?fair-rose•3y ago
update to latest v4 should be enough
we did some fixes in that area
(I think)
fair-roseOP•3y ago
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
previously I've been written it within onSuccess block?
fair-rose•3y ago
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
Breaking React Query's API on purpose
Why good API design matters, even if it means breaking existing APIs in the face of resistance.
fair-roseOP•3y ago
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...
fair-roseOP•3y ago
exactly what I am doing...
fair-rose•3y ago
- status 401 should be handled on your request layer (axios or whatever)
- 204, display some message is an
if statement 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 jsxfair-roseOP•3y ago
Ok, I will give those a thorough reads and update to V5 instead...
I've updated to
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.
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.
@TkDodo 🔮 sorry to bother you, any idea why the queryClient.invalidateQueries({queryKey: ['data']}); is not working as expected?
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....
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.
UPDATE: now I got confirmation from BE that those with json are stored in buckets and are expected to be a little slower.... alright, problem solved, sorta. I guess I might have to delay the invalidate a bit in this case!