如何标准化JavaScript对象数组的键，补全GraphQL响应缺失的null值对应键

1. JavaScript侧统一键实现 #

这种方案不依赖数据源配置，适配任意可变结构的GraphQL返回结果：

实现逻辑 #

• 遍历整个对象数组，收集所有出现过的字段名，去重得到全量字段集合
• 遍历数组中的每一个对象，为缺失的字段补默认值（可自定义为null、空字符串等）
• 处理后所有对象的字段完全对齐，第一个元素自然包含全量字段，满足报表组件要求

代码示例 #

/**
 * 标准化对象数组的字段
 * @param {Array} arr 原始对象数组
 * @param {any} defaultValue 缺失字段的默认值，默认为null
 * @returns {Array} 标准化后的对象数组
 */
function normalizeFields(arr, defaultValue = null) {
  // 边界判断：非数组或空数组直接返回
  if (!Array.isArray(arr) || arr.length === 0) return arr;

  // 收集所有唯一字段
  const allFields = new Set();
  arr.forEach(item => {
    if (item && typeof item === 'object') {
      Object.keys(item).forEach(field => allFields.add(field));
    }
  });
  const fieldList = [...allFields];

  // 补全每个对象的缺失字段
  return arr.map(rawItem => {
    const normalizedItem = { ...rawItem };
    fieldList.forEach(field => {
      if (!(field in normalizedItem)) {
        normalizedItem[field] = defaultValue;
      }
    });
    return normalizedItem;
  });
}

// 使用示例
const rawResponse = [
  // 你的原始Hasura返回结果
];
const reportDataSource = normalizeFields(rawResponse);

2. Hasura 原生配置方案（无需JS处理） #

Hasura默认省略null值字段，可通过以下任意一种配置开启保留null字段的特性：

• 请求参数配置：调用Hasura GraphQL接口时，在URL后追加查询参数?includeNulls=true
• 请求头配置：在请求头中添加字段 X-Hasura-Include-Nulls: true

开启后返回的结果会自动保留所有查询的字段，值为null的字段不会被省略，无需额外做字段对齐处理。

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