Working with React Server Components (RSC)

[pepew-le-boss]

I'm working on a brand new NextJS 13 project. My plan is to use the fetch() API for RSC and apollo-client for Client Components.
I also have a GraphQL server. I want to have some sort of type safety using GraphQL, that's why I came accross graphql-code-generator.

I found some good documentation on how to use it with apollo-client.
My problem is that I didn't found anything about graphql-codegen with RSC and more specifically the fetch() API.

Maybe I missed something, I don't know.

[saihaj]

I am not sure if there is anything special we need. Codegen is merely for type generation.

if you wan to use with fetch() API you can create a simple wrapper function that can do type cast

[pepew-le-boss]

For anyone facing the same problem here's what I did.

Client component:

const { data: response } = useQuery({
    queryKey: ["myQueryKey"],
    queryFn: () => graphqlRequest({ document: myTypedGraphqlQuery, variables: { someVariable: "foo" }}),
  })

Server component:

const response = await graphqlRequest({
    document: myTypedGraphqlQuery,
    variables: { someVariable: "foo" },
  })

The function graphqlRequest() is just a simple wrapper around the graphql-request library that handles authentication and errors.