deep-jade

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

old-apricot•3y ago

You'd usually put it in onSuccess or onSettled of useMutation

deep-jadeOP•3y ago

So I shouldn't use useQuery for this view?

old-apricot•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 ...

deep-jadeOP•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...

harsh-harlequin•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']});
      },

Gaming

Programming

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

Did you find this page helpful?