4 replies

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

useMutation

I call

query.refetch()

query.refetch()

. How do I do that here without causing a full page refresh?

Solution

Solved it by using

useRouter().refresh()

useRouter().refresh()

, which does not perform a full page refresh. To the user, it's just like

query.refetch()

query.refetch()