this is the example from app/posts/page.tsx

const Page = async () => {
    const { data, loading, error } = useQuery<Data>(GET_ALL_CONTENT);

    if (loading || error) return <HandleQuery error={error} loading={loading} />;
    if (data)
        return (
            <div className="page">
                <div className="container flex flex-row gap-2">
                    {data.contents.data.length > 0 ? (
                        data.contents.data.map((item) => {
                            const content = parseContent(item);

                            return (
                                <PostCard
                                    key={content.id}
                                    id={content.id}
                                    title={content.title}
                                    content={content.content}
                                    imageURL={content.imageURL}
                                    createdAt={content.createdAt}
                                />
                            );
                        })
                    ) : (
                        <h1 className="text-center text-2xl">No Post Yet🤧</h1>
                    )}
                </div>
            </div>
        );
};

export default Page;

const { data, loading, error } = useQuery<Data>(GET_ALL_CONTENT);
that is a client pattern, there is no loading in RSC, you just await a promise

you could just fetch the data with GET_ALL_CONTENT query using something like https://www.npmjs.com/package/graphql-request then you just await that data and you can render that statically

realistically you probably want to revalidate this page periodically, and/or on demand, so it will be ISR not SSG

How about still ssg but when i have a new content it will rebuild??

Because i see in the docs it will revalidate within specified second

I would like revalidate per week

Not sure if you are look for apollo support for nextjs 13, but this one you can have a look. https://www.npmjs.com/package/@apollo/experimental-nextjs-app-support.

yeah im using it, it does only ssr or rsc not ssg

'use client';
// ^ this file needs the "use client" pragma

import { ApolloLink, HttpLink } from '@apollo/client';
import {
    ApolloNextAppProvider,
    NextSSRInMemoryCache,
    NextSSRApolloClient,
    SSRMultipartLink,
} from '@apollo/experimental-nextjs-app-support/ssr';

// have a function to create a client for you
function makeClient() {
    console.log('env', process.env.NEXT_PUBLIC_BACKEND_GRAPHQL);
    const httpLink = new HttpLink({
        // this needs to be an absolute url, as relative urls cannot be used in SSR
        uri: process.env.NEXT_PUBLIC_BACKEND_GRAPHQL,
        // you can disable result caching here if you want to
        // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
        fetchOptions: { cache: 'force-cache' },
        // you can override the default `fetchOptions` on a per query basis
        // via the `context` property on the options passed as a second argument
        // to an Apollo Client data fetching hook, e.g.:
        // const { data } = useSuspenseQuery(MY_QUERY, { context: { fetchOptions: { cache: "force-cache" }}});
    });

    return new NextSSRApolloClient({
        // use the `NextSSRInMemoryCache`, not the normal `InMemoryCache`
        cache: new NextSSRInMemoryCache(),
        link:
            typeof window === 'undefined'
                ? ApolloLink.from([
                        // in a SSR environment, if you use multipart features like
                        // @defer, you need to decide how to handle these.
                        // This strips all interfaces with a `@defer` directive from your queries.
                        new SSRMultipartLink({
                            stripDefer: true,
                        }),
                        httpLink,
                  ])
                : httpLink,
    });
}

im not sure is doing await will automatically generate ssg?