T
TanStack•3y ago
sensitive-blue

Where should I put invalidateQueries when I want to refresh a page after a form update?

My views open a form for data updates and I'd like the update the page asap when user saves the form but should I have the invalidateQueries in the form code or in the callback in the view? I have tried both but neither seems to work so probably I don't get something. My understanding of the documentation is that it shouldn't even matter but what is the preferred way?
5 Replies
absent-sapphire
absent-sapphire•3y ago
You'd usually put it in onSuccess or onSettled of useMutation
sensitive-blue
sensitive-blueOP•3y ago
So I shouldn't use useQuery for this view?
absent-sapphire
absent-sapphire•3y ago
i don't understand. you useQuery to read stuff, useMutation to update stuff, and invalidate in the callbacks of useMutation to see the latest stuff after an update happened ...
sensitive-blue
sensitive-blueOP•3y ago
More like I don't understand 🙂 Seems like I need to look for a good example, reference docs don't seem to be enough for me...
rare-sapphire
rare-sapphire•3y ago
suppose you use useQuery and save the data as userData, then later you want to modify those userData with useMutation, then in your useMutation onSuccess you can write 
  const queryClient = useQueryClient();
...
   onSuccess: () => {
        onDisplayNotification('User data updated!');
        queryClient.invalidateQueries({queryKey: ['userData']});
      },
  const queryClient = useQueryClient();
...
   onSuccess: () => {
        onDisplayNotification('User data updated!');
        queryClient.invalidateQueries({queryKey: ['userData']});
      },

Did you find this page helpful?