Type safety

[arcanis]

How do you typically handle type safety for your queries with urql? Most approaches seem to have some tradeoffs:

• Either you don't type the return of useQuery, and it's just any
• Or you can use @graphql-codegen and cast the result manually with useQuery() as <Type>
• Or you can use @graphql-codegen with the urql adapter, but then the queries for all your components go into the same file

Are there other interesting approaches you'd recommend?

[kitten]

There's several options. If you use GraphQL Code Generator you're actually not limited to a single *.graphql file. Instead you can still create separate ones.

We also now have support for its TypedDocumentNode so you wouldn't even have to use the specialised urql type generation that creates wrapped hooks: https://graphql-code-generator.com/docs/plugins/typed-document-node

And yes, lastly there are different options, the most primitive being to pass types yourself.

[arcanis]

There's several options. If you use GraphQL Code Generator you're actually not limited to a single *.graphql file. Instead you can still create separate ones.

I looked into it, but found it difficult due to https://github.com/dotansimha/graphql-code-generator/issues/5085, which means that using fragments under the near-operation-file-preset preset either generates broken types or require all fragments to be in the same files as the queries. Did you not hit this?

[kitten]

I don't quite remember what the solution for that was as I've never used GraphQL Code Generator but custom tooling a longer time back. I suppose it should be possible to import fragments across *.graphql files like graphql-import used to add syntax for.

cc @dotansimha: Any ideas?

[dotansimha]

It should handle the import and do something like ${MyFragment} inside the parent operation. Handling those is sometimes tricky due to the difference between GraphQL (where circular usage is accepted) and JS imports (where circular is an issue).
As long as you provided the operation and the fragments in use for codegen, it will generate the corresponding output file (with pre-compiled DocumentNode) and will import the used fragments from those.

Regarding graphql-import: in codegen we allow it and use it under the hood, but personally, i think it just over complicates things. If you are using unique fragments, you can just reference the fragment by name and codegen will locate it.

Please see my comment in: https://github.com/dotansimha/graphql-code-generator/issues/5085#issuecomment-727957077

[arcanis]

I see, thank you both for your insight! For now I'll try going the "single file containing all the queries" road - I think it should be mostly fine without the need to complexify things with near-operation-file-preset 😊