Docs: discrepancy between example and guide regarding client code generation

[macrozone]

Is your feature request related to a problem? Please describe.

If you want to use graphql-codegen for clients, you would probably head over to https://the-guild.dev/graphql/codegen and pick an example.

however that might not be the ideal way of using graphql-codegen.

Using operations-files makes it harder of spotting unused operations as mentioned in this issue #6605. One solution is to check your generated file for unused operation, but since you might exclude that from linters, you need another tool for that, or at least cannot simply use "unused variables" lint rules. (This problem is even worse if you generate hooks from grapqhl-tags, which then look as unsued variables while they are not)

This issue also mentions the guide https://the-guild.dev/graphql/codegen/docs/guides/react-vue which does NOT recommend operations and instead use typed graphql-documents. Also the roadmap to version 4 mentions this solution #8296 , which obviously already landed.

New devs might get confused by this discrepancy and chose a solution which is not ideal.

Describe the solution you'd like

The landing page https://the-guild.dev/graphql/codegen should show examples with typed graphql-queries for client libraries. It should highlight that those are recommended and would show the alternatives with operation-files either as deprecated or as unopinionated alternatives.

Describe alternatives you've considered

• remove the live-examples alltogether and refer to the guides instead
• add a disclaimer for certain examples and refer to the guide

Is your feature request related to a problem? Please describe.

No response

[beerose]

Solved in #9376