dotansimha/graphql-code-generator-community

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

Open

#141 aberto em 23 de ago. de 2021

Ver no GitHub
 (3 comments) (0 reactions) (0 assignees)TypeScript (195 forks)github user discovery
help wanted

Métricas do repositório

Stars
 (136 stars)
Métricas de merge de PR
 (Métricas PR pendentes)

Description

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?

Guia do colaborador