Using with apollo codegen

[switz]

I'm curious if anyone has this working alongside apollo codegen and if they wouldn't mind sharing their configuration. Cheers!

[phryneas]

We removed support for the Apollo Codegen last year and instead recommend using graphql-codegen - see this note in the apollo-tooling repo:

[2022-07-07] Are you here for codegen? We highly recommend using graphql-code-generator instead. Codegen in this repo is no longer supported and will be removed completely in a future version. For additional migration details, please see this fantastic writeup by @dotansimha: apollographql/apollo-tooling#2053

Generally, if you configure the Graphql Codegen like we show here in our documentation, the codegen will generate your queries with a correctly typed TypedDocumentNode.

You can then call getClient.query(myQuery), useSuspenseQuery(myQuery), useQuery(myQuery) etc., and it will already be correctly typed - also with this package.

[patrick91]

@switz I've also just made an example for the polls' demo: #23 😊

[switz]

I've implemented this into my app.

Perhaps this is a codegen issue, but it would be nice if codegen generated typed client.query calls so I don't have to generate typed document nodes alongside apollo hooks which I use in my app already. They aren't compatible with each other, plus typed document nodes ship a lot of code to the client that's not necessary.

[cordial]

I've implemented this into my app.

Perhaps this is a codegen issue, but it would be nice if codegen generated typed client.query calls so I don't have to generate typed document nodes alongside apollo hooks which I use in my app already. They aren't compatible with each other, plus typed document nodes ship a lot of code to the client that's not necessary.

can u perhaps share your setup and how you're using it?

[nick4fake]

@phryneas thanks, it seems to be working, though there are two issues:

1. Codegen uses Apollo.useQuery and Apollo.useLazyQuery instead of this library. Is there any workaround?
2. How can we use generated hooks? Currently they result in "Attempted to call useQuery() from the server "
3. What about mutations?

[phryneas]

@nick4fake take a look at the codegen config we have in the examples. We do not generate any hooks. That's not necessary to get correct types - you just have the codegen to generate a correctly typed TypedDocumentNode and the hooks will automatically pick up the types once you pick that up.

Mutations don't need any extra treatment since you would never trigger a mutation during a render - neither in RSC nor in SSR. You would only trigger that browser-side in a client component, as the result of a user interaction.

[ctretyak]

@phryneas It's untyped ref. Also, instead of using one "useQuery" we have to use "useBackgroundQuery" and "useReadQuery".

We need the functionality in graphql-codegen to generate not only Documents, but hooks too for simple usage.

[cordial]

@phryneas It's untyped ref. Also, instead of using one "useQuery" we have to use "useBackgroundQuery" and "useReadQuery".

We need the functionality in graphql-codegen to generate not only Documents, but hooks too for simple usage.

But if it creates hooks you won't be able to them in server components which is the point of this library isnt it?

[ctretyak]

But if it creates hooks you won't be able to them in server components which is the point of this library isnt it?

As I understand this library able to create isomorphic Apollo client that could be used both on the server and on the client. It also provides their "useQuery" and rehidtate Apollo store, that could be modified with client side only

[phryneas]

@ctretyak That should be typed, assuming that GetCurrentUserDocument is a TypedDocumentNode<Something>.

If that doesn't work, make sure that you have installed @graphql-typed-document-node/core in your project - I have seen some package managers install that as a dependency of the codegen, but place it so deep in the folder structure that the actual generated code could not pick it up any more.

@ctretyak @cordial Usage between React Server Components and Client Components differs - in a server component you would not use hooks, but getClient().query(). This is just not possible in another way due to the way React Server Compoents are designed. A big part of this package is also about synchronizing data between client components that are rendered on the server (which is another big part of the App Router) to the browser correctly.

For more info, please see the README at the root of this repo.