如何通过Fetch API获取CubeJS查询的TableColumns元数据？

背景说明 #

使用@cubejs-client/react的useCubeQuery钩子时，可通过resultSet.tableColumns()获取表格列的完整元数据，示例代码如下：

import {
  Grid,
  GridCellProps,
  GridColumn,
  GridSortChangeEvent,
  GridToolbar,
} from "@progress/kendo-react-grid";
import { useCubeQuery } from "@cubejs-client/react";

const { resultSet, isLoading, error, progress } = useCubeQuery({
    dimensions: [
      "TenancySchedule.level",
      "TenancySchedule.SuiteNo",
      "TenancySchedule.LeaseType",
      "TenancySchedule.TenantName",
      "TenancySchedule.Initialarea",
      "TenancySchedule.LeaseStartDate", 
      "TenancySchedule.leasetermYears",
      "TenancySchedule.LeaseEndDate",
      "TenancySchedule.NetPassingRent",
      "TenancySchedule.NetPassingRentsqm",
      "TenancySchedule.Abatement",
      "TenancySchedule.Abatementsqm",
      "TenancySchedule.RevenueName",
      "TenancySchedule.Recoveries",
      "TenancySchedule.Recoveriessqm",
      "TenancySchedule.CommonAreaCleaning",
      "TenancySchedule.CommonAreaCleaningsqm",
      "TenancySchedule.CarSpaces",
      "TenancySchedule.ParkingRent",
      "TenancySchedule.ParkingRentsqm",
      "TenancySchedule.StorageOtherIncome",
    ],
    order: [
      ["TenancySchedule.SuiteNo", "asc"],
    ],
    limit: 5000,
    filters: [
      ...defaultFilters,
      ...(monthSelected != null ? monthFilters : []),
    ],
  });

resultSet.tableColumns()

resultSet.tableColumns()返回的列元数据结构示例：

{
  dataIndex:"TenancySchedule.level",
  format: undefined,
  key:"level",
  locked:false,
  meta:undefined,
  shortTitle:"Level",
  title:"Tenancy Schedule Level",
  type: "string"
}

当前需求 #

改用Fetch API直接调用CubeJS的/load接口获取数据，示例代码如下：

const url = process.env.NEXT_PUBLIC_API_BASE_URL + '/genieglobal/v1/cubejs-api/v1/load';

const getTenancyScheduleData = async(session) => {
  // 传递编码后的JSON查询字符串
  const encodedValue = encodeURIComponent(JSON.stringify(getTenancyScheduleQuery(assetCode,monthSelected)));
  try{
    const response = await fetch(`${url}?query=${encodedValue}&queryType=multi`, { 
      method: 'get',
      headers: new Headers({
          'Authorization': 'Bearer '+session?.accessToken, 
          'subscription-key': process.env.NEXT_PUBLIC_API_SUBSCRIPTION_KEY
      })
    });
    const dataResult = await response.json();
    // 如何从dataResult中提取tableColumns？
  }catch(error){
    console.error("获取数据失败:", error);
  }
}

解决方案 #

CubeJS的/load接口在queryType=multi模式下返回的是一个数组，每个数组元素对应一个查询结果，其中columns字段包含列的原始元数据。我们可以通过转换函数将其映射为与resultSet.tableColumns()完全一致的结构：

完整实现代码 #

const url = process.env.NEXT_PUBLIC_API_BASE_URL + '/genieglobal/v1/cubejs-api/v1/load';

// 转换接口返回的列元数据为目标结构
function convertToTableColumns(apiColumns) {
  return apiColumns.map(column => ({
    dataIndex: column.name,
    format: column.format ?? undefined,
    key: column.name.split('.').pop(), // 从命名空间中提取字段名作为key
    locked: column.locked ?? false,
    meta: column.meta ?? undefined,
    shortTitle: column.shortTitle,
    title: column.title,
    type: column.type
  }));
}

const getTenancyScheduleData = async(session) => {
  const encodedValue = encodeURIComponent(JSON.stringify(getTenancyScheduleQuery(assetCode,monthSelected)));
  try{
    const response = await fetch(`${url}?query=${encodedValue}&queryType=multi`, { 
      method: 'get',
      headers: new Headers({
          'Authorization': 'Bearer '+session?.accessToken, 
          'subscription-key': process.env.NEXT_PUBLIC_API_SUBSCRIPTION_KEY
      })
    });
    const dataResult = await response.json();
    
    // 取第一个查询结果的列数据（queryType=multi时返回数组）
    const apiColumns = dataResult[0]?.columns || [];
    const tableColumns = convertToTableColumns(apiColumns);
    
    // tableColumns即为与resultSet.tableColumns()结构一致的元数据数组
    console.log(tableColumns);
    return tableColumns;
  }catch(error){
    console.error("获取数据失败:", error);
    return [];
  }
}

字段映射说明 #

• column.name → dataIndex：接口返回的列唯一标识，对应tableColumns的dataIndex
• column.title/column.shortTitle：直接对应目标结构的同名字段
• column.type：直接对应目标结构的type字段
• key：通过拆分column.name的最后一段生成（如TenancySchedule.level拆出level）
• format/meta：接口返回则直接使用，否则设为undefined
• locked：接口返回则使用对应值，默认设为false

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