dotansimha / dotansimha/graphql-code-generator-community

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

Open
#569 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

### 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;
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.