[react-apollo]: `documentMode: external` does not apply naming parameters

[WouterLVV]

Which packages are impacted by your issue?

typescript-react-apollo

Describe the bug

When using the config option doucmentMode: external, you cannot customize the name of the GraphQL documents it is importing. Since the default does not correspond to the documents outputted by typed-document-node, this leads to not finding the import.

In slightly longer: I am trying to adopt typed-document-node into an existing project. In the current configuration of the project we have one file that generates the operations through the typescript and typescript-operations plugin, and a different file is generated with the typescript-react-apollo plugin. typed-document-node seems to require to be in the same file as typescript and typescript-operations. However, by default react-apollo also generates its own documents (that are not typeable for as far as I can tell). This duplicate generation causes problems and is generally undesired, so I tried the documentNode: external setting, pointing to the correct file.

When using documentmode: external for react-apollo, it does not apply any of the naming convention specificied and thus results in a different name it is trying to import.

Sidenote: moving to the client preset is currently not an option for this project.

Your Example Website or App

https://github.com/WouterLVV/typescript-react-apollo-external-import-example

Steps to Reproduce the Bug or Issue

Create the following 2 'generates' in your codegen.ts:

1. types.ts with plugins ['typescript', 'typescript-operations', 'typed-document-node'] (default config)
2. react-apollo with plugin 'typescript-react-apollo' and config: { documentMode: "external", importOperationTypesFrom: "Operations", importDocumentNodeExternallyFrom: "./types" }
3. generate the files

Expected behavior

with the example documents, there exists the query user(...): ... (in this example only the query name is relevant). The generated GraphQL document in types.ts is called UserDocument. The automatically generated import in react-apollo.ts is import * as Operations from './types';

Current behaviour: react-apollo.ts references Operations.user. Expected behaviour: react-apollo.ts references Operations.UserDocument.

Screenshots or Videos

No response

Platform

• OS: Linux
• NodeJS: 20.10
• graphql version: 16.8.1
• "@graphql-codegen/typed-document-node": 5.0.1
• "@graphql-codegen/typescript": 4.0.2
• "@graphql-codegen/typescript-operations": 4.1.0
• "@graphql-codegen/typescript-react-apollo": 4.1.0

Codegen Config File

import { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = { schema: "schema.graphql", documents: "document.graphql", generates: { "types.ts": { plugins: ["typescript", "typescript-operations", "typed-document-node"] }, "react-apollo.ts": { plugins: [ { "typescript-react-apollo": { documentMode: "external", importOperationTypesFrom: "Operations", importDocumentNodeExternallyFrom: "./types" } }]} }, };

export default config;

Additional context

Currently when documentMode is external, react-apollo takes the raw operation name:

// private getDocumentNodeVariable(...) {
return this.config.documentMode === DocumentMode.external
  ? `Operations.${node.name?.value ?? ''}`
  : documentVariableName;

I believe the solution would be along the lines of:

// private getDocumentNodeVariable(...) {
return this.config.documentMode === DocumentMode.external
  ? this._externalImportPrefix + documentVariableName
  : documentVariableName;

[Raphael-Schulz]

@WouterLVV we were facing the same issue. We added documentVariableSuffix: "" to the base type config:

src/generated/types.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typed-document-node"
    config:
      documentVariableSuffix: ""

This resolved the issue for us. Nevertheless I also think that it would be very nice if typescript-react-apollo would apply the DocumentSuffix while using documentmode: external