feat(preset/client): allow the use of essential config options (#8455)

Author: charlypoly

.changeset/gentle-waves-grab.md

@@ -0,0 +1,12 @@
+---
+'@graphql-codegen/client-preset': patch
+---
+
+The client preset now allows the use of the following `config`:
+- `scalars`
+- `defaultScalarType`
+- `strictScalars`
+- `namingConvention`
+- `useTypeImports`
+- `skipTypename`
+- `arrayInputCoercion`

packages/presets/client/src/index.ts

@@ -69,6 +69,17 @@ export const preset: Types.OutputPreset<ClientPresetConfig> = {
   buildGeneratesSection: options => {
     const reexports: Array<string> = [];
 
+    // the `client` preset is restricting the config options inherited from `typescript`, `typescript-operations` and others.
+    const forwardedConfig = {
+      scalars: options.config.scalars,
+      defaultScalarType: options.config.defaultScalarType,
+      strictScalars: options.config.strictScalars,
+      namingConvention: options.config.scalars,
+      useTypeImports: options.config.useTypeImports,
+      skipTypename: options.config.skipTypename,
+      arrayInputCoercion: options.config.arrayInputCoercion,
+    };
+
     const visitor = new ClientSideBaseVisitor(options.schemaAst!, [], options.config, options.config);
     let fragmentMaskingConfig: FragmentMaskingConfig | null = null;
 
@@ -176,7 +187,7 @@ export const preset: Types.OutputPreset<ClientPresetConfig> = {
         schema: options.schema,
         config: {
           inlineFragmentTypes: isMaskingFragments ? 'mask' : options.config['inlineFragmentTypes'],
-          useTypeImports: options.config.useTypeImports,
+          ...forwardedConfig,
         },
         documents: sources,
       },

website/src/pages/docs/guides/react-vue.mdx

@@ -475,6 +475,23 @@ Feel free to continue playing with this demo project, available in all flavors,
 
 <br />
 
+## Config API
+
+The `client` preset allows the following `config` options:
+
+- [`scalars`](/plugins/typescript/typescript#config-api-reference): Extends or overrides the built-in scalars and custom GraphQL scalars to a custom type.
+- [`strictScalars`](/plugins/typescript/typescript#config-api-reference): If `scalars` are found in the schema that are not defined in scalars an error will be thrown during codegen.
+- [`namingConvention`](/plugins/typescript/typescript#config-api-reference): Available case functions in `change-case-all` are `camelCase`, `capitalCase`, `constantCase`, `dotCase`, `headerCase`, `noCase`, `paramCase`, `pascalCase`, `pathCase`, `sentenceCase`, `snakeCase`, `lowerCase`, `localeLowerCase`, `lowerCaseFirst`, `spongeCase`, `titleCase`, `upperCase`, `localeUpperCase` and `upperCaseFirst`
+- [`useTypeImports`](/plugins/typescript/typescript#config-api-reference): Will use `import type {}` rather than `import {}` when importing only types. This gives compatibility with TypeScript's `"importsNotUsedAsValues": "error"` option.
+- [`skipTypename`](/plugins/typescript/typescript#config-api-reference): Does not add `__typename` to the generated types, unless it was specified in the selection set.
+- [`arrayInputCoercion`](/plugins/typescript/typescript-operations#config-api-reference): The [GraphQL spec](https://spec.graphql.org/draft/#sel-FAHjBJFCAACE_Gh7d) allows arrays and a single primitive value for list input. This allows to deactivate that behavior to only accept arrays instead of single values.
+
+<br />
+
+---
+
+<br />
+
 ## Appendix I: React Query with a custom fetcher setup
 
 The use of `@tanstack/react-query` along with `graphql-request@^5` is highly recommended due to GraphQL Code Generator integration with `graphql-request@^5`: