graphql-codgen config for the best fully-typed, client-side GraphQL experience with TypeScript

codegen.ts

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

const config: CodegenConfig = {
    config: {
        namingConvention: {
            // Ensure enum values are the same as their name, not a number or camelCased
            enumValues: 'keep',
        },
    },
    schema: ['src/**/schema.graphql'],
    documents: ['src/components/**/*.tsx'],
    generates: {
        './src/gql/generated/': {
            config: {
                // See:  https://the-guild.dev/graphql/scalars/docs/quick-start#graphql-code-generator-integration
                // More: https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars
                scalars: {
                    DateTime: 'Date',
                    EmailAddress: 'string',
                    PhoneNumber: 'string',
                    ReactElement: 'React.ReactElement',
                },
            },
            preset: 'client',
            presetConfig: {
                fragmentMasking: {
                    // Disambiguate with React Hooks – https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#the-usefragment-helper
                    unmaskFunctionName: 'getFragmentData',
                },
            },
        },

        // Nececssary for "rolling up" multiple GraphQL schemas into 1 for the client
        './src/gql/generated/typeDefs.graphql': {
            config: {
                // commentDescriptions: true,
                includeDirectives: true,
                // includeIntrospectionTypes: true,
            },
            plugins: ['schema-ast'],
        },

        './src/gql/generated/introspection.ts': {
            config: {
                includeScalars: true,
                includeEnums: true,
                includeInputs: true,
                includeDirectives: true,
                useTypeImports: true,
                module: 'es2015',
            },
            plugins: ['urql-introspection'],
        },

        './src/gql/generated/resolvers.types.ts': {
            config: {
                // If resolvers return a different model type, we have to map it here.
                // Otherwise, it's assumed that resolvers return the type defined in the GraphQL schema!
                enumValues: {},
                mappers: {
                    ActionItem:
                        '@my/custom/types#ActionItem',
                    User: '@my/custom/types#User',
                    Workflow:
                        '@my/custom/types#Workflow',
                },
                useTypeImports: true,
            },
            plugins: [
                // Prevent lint errors for generated code (especially `import-order`)
                {add: {content: '/* eslint-disable */'}},
                'typescript-resolvers',
            ],
            preset: 'import-types-preset',
            presetConfig: {
                typesPath: './graphql',
            },
        },
    },

    ignoreNoDocuments: true,
};

export default config;