Hey i think revalidatePath or revalidatePath work fine in this case, can u share more context?

for example check this: https://github.com/Nahuelluca20/nextjs-with-tanstack-query/blob/main/app/posts/queries.ts#L19

I have a page where I update some data, and after doing this update I need to update the UI, but the UI only updates if I refresh the page. Reading the documentation I saw that revalidateTag does not instantly update the UI, it just cancels the cache so that when you access the page again the new data will be fetched from the server again.

I need to update my UI right after doing this update without having to refresh the page

I'm also using useMutate from react query, I don't know if there is a need to use it

Ok i think revalidatePath work fine in this case because this clear cache an make a request again see:
https://nextjs.org/docs/app/building-your-application/caching#opting-out-3

Other solution is make a page dynamic with dynamic = 'force-dynamic' or revalidate = 0 see:
https://nextjs.org/docs/app/building-your-application/caching#opting-out-2

or make dynamic with dynamic functions, doing something like that:

import {cookies} from "next/headers";

export default function Page() {
  cookies(); // headers() noStore()

  return (
    <div>
      <h1>App Router</h1>
      <p>{Date.now()}</p>
    </div>
  );
}

But i repeat revalidatePath should work, if you want share some of your code for check.

let me know if this is useful

This is overcomplicating things

All you need to know is the following, both the revalidation functions (tag and path) have variable results when called differently. If you call a server action, the cache is invalidated, and new data is fetched directly, nothing to be done on your part.

if you call an api route, you just need to do router.refresh() from next/navigation after you do the revalidate function.
the router stuff needs to be done on the client btw

I understand, in my case I am calling an api route, so I have to use router.refresh() to update the data in the UI?

Yup

It worked, but forcing router.refresh() seems strange, would a better practice be to call server actions directly?

Sure, router.refresh() isn't wrong btw lol.. it's supported and recommend by nextjs

It worked perfectly, but I'm using react query's useMutation, do you see any problems or do you think there's no need to use react query?

in my route api I call revalidateTag