Best way to use codegen queries in Next RSC.

[beckboan]

I'm trying to use URQL to retrieve some posts from a DB and want it to be done in a server component. I'm using Next13.4+. Right now, I am using codegen to output my graphql.tsx based on my defined calls. Ex:

User-Defined:

query Posts {
  posts {
    id
    createdAt
    updatedAt
    title
  }
}

Code Generated:

export const PostsDocument = gql`
    query Posts {
  posts {
    id
    createdAt
    updatedAt
    title
  }
}
    `;

export function usePostsQuery(options?: Omit<Urql.UseQueryArgs<PostsQueryVariables>, 'query'>) {
  return Urql.useQuery<PostsQuery, PostsQueryVariables>({ query: PostsDocument, ...options });
};

I want to import this into a RSC to use with the an urql client to essentially fetch data on the server before displaying any of it. Here is how I can get it to work temporarily.

const makeClient = () => {
  return createClient({
    url: _graphqurl_
    exchanges: [cacheExchange, fetchExchange],
    fetchOptions: {
      credentials: "include",
    },
    suspense: true,
  });
};

const postsq = gql`
  query {
    posts {
      id
      createdAt
      updatedAt
      title
    }
  }
`;

const { getClient } = registerUrql(makeClient);

export default async function Home() {
  const result = await getClient().query(postsq, {});

If I try to import the PostsDocument from the @/generated/graphql.tsx file, I get the error:

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

I'm aware this is because of the import at the top of the graphql.tsx document:

import gql from 'graphql-tag';
import * as Urql from 'urql';

Is there a way that urql can function natively on the server when using the pre-generated code?

How can I successfully reuse the type safety of the generated code on the server side? Has anyone ran into this issue so far?