Support use in graphql-let

[NickClark]

Would be nice if this could support graphql-let.

I've added the issue to both projects since at this point I don't know which library should be the one to handle this.

Generates the following error:

Plugin "typed-document-node" validation failed:

 Found 1 error

  ✖  <redacted>/node_modules/graphql-let/__generated__/src/renderer/auth/graphql/documents.graphql.tsx
    Plugin "typed-document-node" requires extension to be ".ts"!
    Error: Plugin "typed-document-node" validation failed:
        at executePlugin (<redacted>/node_modules/@graphql-codegen/core/index.cjs.js:31:19)
    Error: Plugin "typed-document-node" validation failed:
        at executePlugin (<redacted>/node_modules/@graphql-codegen/core/index.cjs.js:31:19)

[dotansimha]

Interesting. @NickClark can you please share your codegen.yml file? if it's only a matter of allowed extensions, it should be super simple to add that.

[NickClark]

With graphql-let you use a .graphql-let.yml file. Mine looks about like this:

schema:
  - "<path to server schema>.gql"
  - "**/*.graphqls"
documents: "**/*.graphql"
plugins:
  - "typescript"
  - "typescript-operations"
  - "typed-document-node"
respectGitIgnore: true

I think the issue stems (at least for this specific error), from the fact that the plugin explicitly checks for the extension of the output file. graphql-let always uses tsx.

Linking to the sister issue: piglovesyou/graphql-let#127

Oh, and part of the reason I'm using graphql-let is that it's officially recommended here: https://graphql-code-generator.com/docs/plugins/typescript-graphql-files-modules

[dotansimha]

It makes sense. I need we need to investigate it a bit more. Also, I think graphql-let uses near-operation-file preset, and the plugin for typed-document-node haven't been tested for it yet.
I can add support for .tsx extensions, no problem ;)

[dotansimha]

@NickClark Fixed in codegen, and published a new version. Please try 1.17.3, it should allow .tsx extension :)
Waiting for your feedback on that (the new version and integration with graphql-let / near-operation-file preset) and on typed-document-node in general ;) It's not complete yet, and we are still experimenting, but the basics works and provide nice DX.

[NickClark]

I love the concept! I had wanted to do something similar in the past but didn't have the opportunity to dig into it! So far the biggest issue I've seen is that variables do not autocomplete. We use the apollo client directly since our app uses Svelte.

Basically with the following:

 const query = await apolloClient.mutate({
      mutation: myMutation,
      variables: { myVar: "test" },
    });

If we don't get the variables right, query with just be a result with all generics set to any. So there's still value, but you won't get variable auto-completion. This may just be a limitation of TypeScript since we are wanting to infer types from a sibling property.

But I suppose I should put that in a separate issue. 😛

Anyways.... YA! I'm going to try the new version, thanks for getting on this so quickly!

[dotansimha]

Yes, just noticed it as well :) I think it's because if fallbacks to the any overload of the original library. Thanks for the feedback @NickClark!
I'll take a look if we can solve that. @kamilkisiela ideas? :D

[NickClark]

So far so good.

I can confirm that commenting out the types in ApolloClient.d.ts fixes the issue mentioned above. Unfortunately, I haven't been able to figure out how to ignore them or work around them.

Also, this issue seems related: microsoft/TypeScript#36146

[dotansimha]

Thanks @NickClark ! I created a new issue for this one #15), and closing this.