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()} />
}

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

useMutation

useMutation I call

query.refetch()

query.refetch()

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()

useRouter().refresh()

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

query.refetch()

query.refetch()

query.refetch()

query.refetch()