Apollo nextjs plugin

[correttojs]

Hi,

I created a plugin to generate code to link apollo-client with the nextjs getServerSideProps function. See description and example at https://github.com/correttojs/graphql-codegen-apollo-next-ssr/blob/master/README.md.

I would like to extend this plugin adding two features to enhance the document generation:

• option to add __typename to each field, as apollo does internally
• generate the apollo compatible persistent queries hashes

I think the two features would belong to the react-apollo plugin. Would you like me to create a PR?

I'd like to ask some opinions about two other topics:

• js config file to allow injecting custom code
• generate a single hook/HOC,... instead of one for each query, and add a type guard for each possible query. This way the generated code overhead would be minimal.

Thanks!

[dotansimha]

Hן @correttojs ! This looks like a great idea! Maybe do you want to open a PR and add this to the list of available plugins in our website?
Regarding __typename - you can add this automatically, we have a configuration flag for it in typescript-operations.

Regarding injecting custom code - this could be done by using add plugin.

Regarding the single hook- we are experimenting with created a typed DocumentNode, this could be an alternative for that, and the it will be possible to use any hook with that. You can find an example for this here: https://github.com/dotansimha/graphql-typescript-typed-document-node

[correttojs]

hi @dotansimha, thank you for your detailed answer, the typed DocumentNode repo looks really promising!

I need to add few tests and review some options, but sure I'd be glad to add the plugin to your list :-)

I see you probably refer to the nonOptionalTypename option, instead I'd like to add the __typename to the DocumetnNode itself, which doesn't seem to be touched by codegen. I would use the addTypenameToDocument helper offered by apollo-utilities

A js config would allow to inject custom code to the visitor rather than to the generated code, for example in case of the react-apollo hook it may allow to add different operation contexts depending on the operationName.