Urql with nextjs app router?

[siamahnaf]

From this docs-

https://commerce.nearform.com/open-source/urql/docs/advanced/server-side-rendering/#nextjs

I am clear about data fetching in Server Components and Client Components. But I want to know is there any way to fetch data in Server components and will be cached for all its nested client components. It is my first questions-

I see, using useQuery hook from @urql/next in client component, without wrapping Suspense boundary almost behave as ssr data fetch. I don't get any flashed. But in my previous project I see that, in production, some page which has multiple useQuery in a client component, causing continuous data fetch and hanging the websites. After some research and reading docs carefully I see I need to wrap with Suspense. After wrapping with Suspense continuous data fetching and page hang was solved but, but there is a loading screen.

Without wrapping Suspense using useQuery do not suspend query after getting initial response.

I try to find if there is any useSuspenseQuery, I do not find it.

If anyone know the mechanism about this, please explain?

Again, if there is any way to fetch data on Server component and cached to it all nested client components. Because I don't want to show a loading screen in my page, using Suspense we need to do that. Tanstack query already has the options for caching data to client component from server component.

If need to review my code-

"use client"
import { useMemo, ReactNode } from "react";
import { UrqlProvider, ssrExchange, cacheExchange, fetchExchange, createClient } from "@urql/next";
import { getCookie } from "cookies-next";

//Interface
interface Props {
    children: ReactNode;
    cookie: string;
}

const Provider = ({ children, cookie }: Props) => {
    //Cookie
    const token = getCookie("NAOWSbL1sKQ30aq9", { path: "/" });

    //Client
    const [client, ssr] = useMemo(() => {
        const ssr = ssrExchange({
            isClient: typeof window !== "undefined"
        });
        const client = createClient({
            url: process.env.NEXT_PUBLIC_API_URL as string,
            exchanges: [cacheExchange, ssr, fetchExchange],
            suspense: true,
            fetchOptions: {
                headers: {
                    authorization: `Bearer ${cookie ?? token}`
                }
            }
        })
        return [client, ssr]
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <UrqlProvider client={client} ssr={ssr}>
            {children}
        </UrqlProvider>
    );
};

export default Provider;

Here is my whole code-

https://github.com/siamahnaf/nextjs-middleware-warning