[typescript-react-apollo]: `importDocumentNodeExternallyFrom` omits `documentVariableSuffix`

[blaenk]

I'm trying to figure out how to be able to generate separate files: one containing only types/operations/typed-document-nodes, and the other containing only react hooks. The goal is that then if a consuming package doesn't depend on react, it can specifically import the types and not have any errors since the react hooks are in a separate file, while minimizing the duplication of generated code/types.

(BTW, if there are better ways of doing this please let me know!)

For this, I am thinking of generating types/operations/typed-document-nodes in one file say types.ts, and then only react hooks in e.g. react.ts.

As a result, I need react.ts to import types and operations from types.ts to avoid duplicating types.

I can more or less approximate this by using:

documentMode: external
importDocumentNodeExternallyFrom: ./types

In the typescript-react-apollo config. However, this ends up referring to documents as e.g. Operations.SomeOperation instead of Operations.SomeOperationDocument which is how the document is named in types.ts. One workaround I can think of is setting documentVariableSuffix: "" in the configuration for types.ts, but this is not ideal as it's hacky and my code already references variables with the Document suffix.

I believe maybe the problem is because the seemingly-relevant code for typescript-react-apollo doesn't take into account any kind of suffix, such as this.config.documentVariableSuffix:

https://github.com/dotansimha/graphql-code-generator/blob/0538923f0cee884f95136b3ac794f83238cee568/packages/plugins/typescript/react-apollo/src/visitor.ts#L161-L165

I wonder if it should be something like Operations.${node.name?.value ?? ''}${this.config.documentVariableSuffix} instead?

[novascreen]

I've run into this as well. Just to add a small detail, it seems that the naming convention is off as well. I get Operations.someOperation vs SomeOperationDocument

[KamalAman]

@dotansimha can you please approve the PR for this. This is Definitely unexpected behaviour.

https://github.com/dotansimha/graphql-code-generator-community/pull/674

[InsidersByte]

@dotansimha any updates on this?

This would allow me to use this package alongside the client preset by using the external document mode as it has a bug with using documentVariableSuffix to remove the Document suffix (I raised https://github.com/dotansimha/graphql-code-generator/issues/10229)