How to Refetch in App Router?

How do I refetch/revalidate data loaded from Server Components? I have a Server Component page with a Client Component inside it
export default async function Parent() {
return <Child data={await api.route.data.query()} />
}
export default async function Parent() {
return <Child data={await api.route.data.query()} />
}
Normally, when I useMutation I call query.refetch(). How do I do that here without causing a full page refresh?
Solution:
Solved it by using useRouter().refresh(), which does not perform a full page refresh. To the user, it's just like query.refetch()
Jump to solution
2 Replies
Mocha
Mocha4mo ago
I'm aware of revalidatePath() but it can't be used in Client. It's useful for Server Actions, but I just prefer the type safety and context (for auth) that comes with the tRPC setup.
Solution
Mocha
Mocha4mo ago
Solved it by using useRouter().refresh(), which does not perform a full page refresh. To the user, it's just like query.refetch()