TypeScript项目中typescript-mock-data的onlyOperationTypes配置异常求助

我在开发TypeScript项目时，使用typescript-mock-data生成模拟数据。在codegen.ts文件中设置onlyOperationTypes: true，期望仅为操作类型生成模拟数据，但运行代码生成后，graphql.ts文件表现正常，mockers文件却被清空了所有内容。已确认其他配置选项均正常工作，且查阅typescript-mock-data文档未找到onlyOperationTypes的相关说明。请问有人成功在TypeScript项目中使用该配置吗？能否提供正确的配置指导？

配置代码 #

const config: CodegenConfig = {
overwrite: true,
hooks: {
    afterAllFileWrite: ['prettier --write'],
},
generates: {
    [TYPES_FILE]: {
        schema: graphQLEndpoint,
        documents: GRAPHQL_DOCUMENT_LOCATIONS,
        plugins: [
            {
                add: {
                    content: [autoGeneratedHeader],
                },
            },
            'typescript',
            'typescript-operations',
            'typescript-react-apollo',
        ],
        config: {
            avoidOptionals: {
                field: true,
                object: true,
                defaultValue: true,
            },
            namingConvention: {
                typeNames: 'keep',
                enumValues: 'change-case-all#upperCase',
            },
            exportFragmentSpreadSubTypes: true,
            preResolveTypes: true,
            // onlyOperationTypes: true,
        },
    },
    [MOCKERS_FILE]: {
        schema: graphQLEndpoint,
        documents: GRAPHQL_DOCUMENT_LOCATIONS,
        plugins: [
            {
                add: {
                    content: [autoGeneratedHeader],
                },
            },
            {
                'typescript-mock-data': {
                    typeNames: 'keep',
                    enumValues: 'change-case-all#upperCase',
                    terminateCircularRelationships: true,
                },
            },
        ],
        config: {
            withHooks: false,
            withComponent: false,
            scalars: {
                Time: 'string',
            },
            typesFile: 'src/services/graphql/generated/graphql.ts',
            avoidOptionals: {
                field: true,
                object: true,
                defaultValue: true,
            },
            namingConvention: {
                typeNames: 'keep',
                enumValues: 'change-case-all#upperCase',
            },
            defaultScalarType: 'unknown',
            preResolveTypes: true,
            // onlyOperationTypes: false,

        },
    },
},
};

解决方案 #

首先明确：onlyOperationTypes是graphql-code-generator中typescript-operations等插件的配置项，并非typescript-mock-data的原生配置，直接在mockers文件的config中设置会导致插件无法识别，进而生成空内容。

要实现仅为操作类型生成模拟数据，可通过以下两种方式：

方式1：指定要生成mock的操作类型 #

在typescript-mock-data插件的配置中，通过types选项明确列出需要生成mock的操作相关类型（比如Query/Mutation的返回类型）：

{
  'typescript-mock-data': {
    typeNames: 'keep',
    enumValues: 'change-case-all#upperCase',
    terminateCircularRelationships: true,
    // 仅为指定的操作类型生成mock
    types: ['GetUserQuery', 'UpdateUserMutation', 'CreatePostMutation']
  },
}

方式2：仅传入包含操作的文档 #

如果你的GRAPHQL_DOCUMENT_LOCATIONS包含了所有GraphQL文档，可单独创建一个仅存放操作（Query/Mutation）的文档目录，然后在mockers文件的documents选项中指向该目录，插件会自动基于这些文档中的类型生成mock：

[MOCKERS_FILE]: {
  schema: graphQLEndpoint,
  // 仅指向包含操作的文档目录
  documents: 'src/services/graphql/operations/**/*.graphql',
  plugins: [
    // ... 插件配置不变
  ],
  // ... 其他配置不变
}

调整后的完整配置示例 #

const config: CodegenConfig = {
  overwrite: true,
  hooks: {
    afterAllFileWrite: ['prettier --write'],
  },
  generates: {
    [TYPES_FILE]: {
      schema: graphQLEndpoint,
      documents: GRAPHQL_DOCUMENT_LOCATIONS,
      plugins: [
        {
          add: {
            content: [autoGeneratedHeader],
          },
        },
        'typescript',
        'typescript-operations',
        'typescript-react-apollo',
      ],
      config: {
        avoidOptionals: {
          field: true,
          object: true,
          defaultValue: true,
        },
        namingConvention: {
          typeNames: 'keep',
          enumValues: 'change-case-all#upperCase',
        },
        exportFragmentSpreadSubTypes: true,
        preResolveTypes: true,
        onlyOperationTypes: true, // 这里在typescript-operations中是有效的
      },
    },
    [MOCKERS_FILE]: {
      schema: graphQLEndpoint,
      documents: GRAPHQL_DOCUMENT_LOCATIONS,
      plugins: [
        {
          add: {
            content: [autoGeneratedHeader],
          },
        },
        {
          'typescript-mock-data': {
            typeNames: 'keep',
            enumValues: 'change-case-all#upperCase',
            terminateCircularRelationships: true,
            types: ['GetUserQuery', 'UpdateUserMutation']
          },
        },
      ],
      config: {
        withHooks: false,
        withComponent: false,
        scalars: {
          Time: 'string',
        },
        typesFile: 'src/services/graphql/generated/graphql.ts',
        avoidOptionals: {
          field: true,
          object: true,
          defaultValue: true,
        },
        namingConvention: {
          typeNames: 'keep',
          enumValues: 'change-case-all#upperCase',
        },
        defaultScalarType: 'unknown',
        preResolveTypes: true,
      },
    },
  },
};

内容的提问来源于stack exchange，提问作者Idan