dotansimha / dotansimha/graphql-code-generator

client-preset with `documentMode: 'string'` does not compile with Typescript's `"noPropertyAccessFromIndexSignature": true`

Open
#10,550 2 comments 0 reactions 1 assignee Claimed by @eddeee888 View on GitHub
Dominant language
TypeScript
Stars
11.3k
Forks
1.4k
Avg merge
1d 1h
Merged PRs (30d)
23

Description

### Which packages are impacted by your issue?

@graphql-codegen/client-preset

### Describe the bug

When using the client preset to generate Typescript using `documentMode: 'string'`. Then typescript has errors in the `fragment-masking.ts` file when compiled with `"noPropertyAccessFromIndexSignature": true`

### Your Example Website or App

N/A

### Steps to Reproduce the Bug or Issue

N/A

### Expected behavior

When generating a client with string documentMode I expect to get not Typescript errors.

### Screenshots or Videos

*No response*

### Platform

N/A

### Codegen Config File

*No response*

### Additional context

The errors are on the lines generated by these 2 lines:
[https://github.com/dotansimha/graphql-code-generator/blob/master/packages/presets/client/src/fragment-masking-plugin.ts#L93-L94]()

However, generating without `documentMode: 'string'` the resulting code is fine. The normal generation function uses a different style of accessing `__meta__`:
[https://github.com/dotansimha/graphql-code-generator/blob/master/packages/presets/client/src/fragment-masking-plugin.ts#L109]()

I tested using the same technique for accessing the entries out of `__meta__` used in the regular mode inside the `isStringDocumentMode` conditional and it works fine. So it appears the solution has already been implemented for the regular mode and simply needs to be copied to the string document mode solution.

I have used `patch-package` on my project to get this working:

```diff
diff --git a/node_modules/@graphql-codegen/client-preset/cjs/fragment-masking-plugin.js b/node_modules/@graphql-codegen/client-preset/cjs/fragment-masking-plugin.js
index 9f466a6..0bf89f6 100644
--- a/node_modules/@graphql-codegen/client-preset/cjs/fragment-masking-plugin.js
+++ b/node_modules/@graphql-codegen/client-preset/cjs/fragment-masking-plugin.js
@@ -80,8 +80,8 @@ export function isFragmentReady(
fragmentNode: TypedDocumentString,
data: FragmentType, any>> | null | undefined
): data is FragmentType {
- const deferredFields = queryNode.__meta__?.deferredFields as Record;
- const fragName = fragmentNode.__meta__?.fragmentName as string | undefined;
+ const deferredFields = (queryNode as { __meta__?: { deferredFields: Record } }).__meta__?.deferredFields;
+ const fragName = (fragmentNode as { __meta__?: { fragmentName: string | undefined } }).__meta__?.fragmentName;

if (!deferredFields || !fragName) return true;

diff --git a/node_modules/@graphql-codegen/client-preset/esm/fragment-masking-plugin.js b/node_modules/@graphql-codegen/client-preset/esm/fragment-masking-plugin.js
index bc2999a..aa115b6 100644
--- a/node_modules/@graphql-codegen/client-preset/esm/fragment-masking-plugin.js
+++ b/node_modules/@graphql-codegen/client-preset/esm/fragment-masking-plugin.js
@@ -77,8 +77,8 @@ export function isFragmentReady(
fragmentNode: TypedDocumentString,
data: FragmentType, any>> | null | undefined
): data is FragmentType {
- const deferredFields = queryNode.__meta__?.deferredFields as Record;
- const fragName = fragmentNode.__meta__?.fragmentName as string | undefined;
+ const deferredFields = (queryNode as { __meta__?: { deferredFields: Record } }).__meta__?.deferredFields;
+ const fragName = (fragmentNode as { __meta__?: { fragmentName: string | undefined } }).__meta__?.fragmentName;

if (!deferredFields || !fragName) return true;
```

I have not created a reproduction example because there is an example of working code just 16 lines down in the exact file. There is not really a need to further debug this issue since it has already been solved for the normal mode. If you'd like me to build it regardless of this, then simply ask and I will.

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.