Better support for `graphql-scalars`

[charlypoly]

DX proposal:

{
   // ...
   scalars: "graphql-scalars#clientTypes"
   // ...
}

Map to the primitive (serialized) value, always, and not use the GraphQLScalar or anything from graphql-scalars lib.

---

Related #8412, #8296 (comment)

[Urigo]

I would also suggest writing in more details, maybe a guide around the whole integration of these two tools as sometimes there is a lot of confusion around them and what's possible and what not

[lensbart]

Fixing this would also obviate #7763

[sschneider-ihre-pvs]

this seems to break usage with noexports and using the generated files in tsconfig include. While it does insert the correct type tsc does not like imports in definition files

[nareshbhatia]

I know this is in the v5 roadmap, but is there a temporary workaround?

Currently my graphql schema has

scalar DateTime

This generarates

export type Scalars = {
  ID: { input: string; output: string; }
  String: { input: string; output: string; }
  Boolean: { input: boolean; output: boolean; }
  Int: { input: number; output: number; }
  Float: { input: number; output: number; }
  DateTime: { input: any; output: any; }
};

Is there any way to force DateTime to be type string instead of any?

I tried the suggestion here, but it looks like the client preset and the typescript plugin work independently and don't affect each other.

Here's my current codegen configuration:

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

const config: CodegenConfig = {
  schema: './src/gql/**.graphql',
  documents: ['src/**/*.{ts,tsx}'],
  generates: {
    './src/generated/gql/': {
      preset: 'client',
      presetConfig: {
        fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
      },
    },
  },
  hooks: { afterAllFileWrite: ['prettier --write'] },
};

export default config;

[nareshbhatia]

Ok, figured it out. Had to add a config.scalars in the preset itself:

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

const config: CodegenConfig = {
  schema: './src/gql/**.graphql',
  documents: ['src/**/*.{ts,tsx}'],
  generates: {
    './src/generated/gql/': {
      preset: 'client',
      presetConfig: {
        // see https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#the-usefragment-helper
        fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
      },
      config: {
        scalars: {
          DateTime: 'string',
        },
      },
    },
  },
  hooks: { afterAllFileWrite: ['prettier --write'] },
};

export default config;