Query Invalidation with NextJS App Router + RSC

import { AscOrDesc } from "@/gql/graphql";
import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
import { cookies } from "next/headers";
import getQueryClient from "@/queryClient";
import Scripts from "./scripts";
import { ScriptConnection } from "@/lib/queries/scriptConnection";

export default async function ScriptPage() {
    const cookieStore = cookies();
    const token = cookieStore.get("accessToken");

    const queryClient = getQueryClient();

    await queryClient.prefetchQuery({
        queryKey: [
            "getScripts",
            {
                cursor: "",
                searchTerm: "",
                filters: [],
                limit: 10,
                sortBy: "id",
                sortDir: AscOrDesc.Asc,
                accessToken: token?.value || "",
            },
        ],
        queryFn: ScriptConnection,
    });

    return (
        <HydrationBoundary state={dehydrate(queryClient)}>
            <Scripts />
        </HydrationBoundary>
    );
}

// inside of a client component
    const queryClient = new QueryClient()

    const updateScript = useMutation({
        mutationKey: ["updateScript"],
        mutationFn: UpdateScript,
        onMutate: () => {
        // in react-query dev tools, getScripts is never invalidated
    queryClient.invalidateQueries("getScripts");
...
...