Theo's Typesafe Cult•11mo ago

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

MochaOP•11mo 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•11mo ago

Solved it by using useRouter().refresh(), which does not perform a full page refresh. To the user, it's just like query.refetch()

Gaming

Programming

How to Refetch in App Router?