Graphql-code-generator: Incorrect scalar translation of index signature for TypeScript

[kapral18]

Describe the bug

When overwriting Date scalar in codegen.yml in gatsby project, I get incorrect translation of JSON: { [key: string]: any } index signature to JSON: [object Object] in TypeScript. https://graphql-code-generator.com/docs/plugins/typescript#usage-example

To Reproduce
Steps to reproduce the behavior:

1. My GraphQL schema:

https://raw.githubusercontent.com/kapral18/karenjs.com/TS/schema.json

1. My GraphQL operations:

https://github.com/kapral18/karenjs.com/tree/TS

1. My codegen.yml config file:

schema: http://localhost:8000/___graphql
documents:
    - ./src/**/*.{ts,tsx}
    - ./node_modules/gatsby-*/**/*.js
generates:
    ./src/types/generated/index.ts:
        config:
            immutableTypes: true
            avoidOptionals: true
            scalars:
                Date: string
                JSON: { [key: string]: any }
        plugins:
            - typescript
            - typescript-operations

Expected behavior
JSON: { [key: string]: any } should be correctly translated into JSON: { [key: string]: any } type in src/types/generated/index.ts

Environment:

• OS: macOS 10.14.4
• @graphql-codegen/...:
  "@graphql-codegen/cli": "1.1.0",
  "@graphql-codegen/typescript": "1.1.0",
  "@graphql-codegen/typescript-operations": "1.1.0",
• NodeJS: 10.15.3

[dotansimha]

@kapral18 can you please try JSON: "{ [key: string]: any }"?

[kapral18]

Yes. Fixed. Thank you.

[kapral18]

Should I open a PR for docs? @dotansimha or is there something I am not taking into account maybe?

[dotansimha]

@kapral18 Maybe we can add a note about that. Do you want to create a PR?

You can add it here:
https://github.com/dotansimha/graphql-code-generator/blob/master/packages/plugins/other/visitor-plugin-common/src/base-visitor.ts#L19
( you can use @warning and it will generate a note in the docs website, example: https://github.com/dotansimha/graphql-code-generator/blob/master/packages/plugins/typescript/resolvers/src/index.ts#L48)

[kapral18]

@dotansimha For sure. Thanks for the links

[kapral18]

@dotansimha After some debugging here is what happens:

js-yaml is parsing the config and for

{[key: string]: any}

it returns

{[object Object]: "any"}

Later on here

https://github.com/dotansimha/graphql-code-generator/blob/97d5fbee29223a1c1b0addb24128e43650a4ec2f/packages/plugins/other/visitor-plugin-common/src/base-types-visitor.ts#L77

scalarValue which holds the object, is put into template literals, which triggers object serialization aka .toString() call, which for js objects just returns [object Object].

So I think putting a @warning will not change much, since as outlined previously any object passed into config.scalars is going to end up [object Object]

so we can just change docs to the stringified version altogether already.

What do you think?

[dotansimha]

@kapral18 But adding " solves this, it's not an issue with the codegen, it's just the way YML standard works - it detects { and [ as objects and not as strings.
I think that just adding a @warning about object/array parsing is enough.

[kapral18]

@dotansimha

Sure js-yaml gives a correct object for correctly defined shapes based on yaml syntax, excluding this particular one with computed key. No problem with that.

The problem is different. Let's say you have the object back from yml parser. You still end up generating stringified version of it by javascript rules and lose the whole object identity.

And with " you just skip the serialization and pass the string blob as is, which to me is like a "hack" which is the only possible way here to not lose identity.

https://github.com/dotansimha/graphql-code-generator/blob/97d5fbee29223a1c1b0addb24128e43650a4ec2f/packages/plugins/other/visitor-plugin-common/src/base-types-visitor.ts#L77

scalarValue holds whatever is the value of config.scalars right?

so if it's a perfectly valid parsed {key: "value"} it will be still stringified with [object Object] output, no matter the contents, if it's an [1,2,3] it will be 1,2,3 etc.

Does it make sense? Or am I missing something obvious?

[dotansimha]

@kapral18 Sorry for the delay. Opening.
You are right, in this case, we need to make sure to stringify it correctly in case of an object.

[dotansimha]

@kapral18 fixed in: https://github.com/dotansimha/graphql-code-generator/pull/2286
I used JSON.stringify() and it seems to work.

[dotansimha]

Fixed in 1.5.0 🎉