Cube.js QueryBuilder如何设置timeDimensions默认dateRange为当日

方案1：使用QueryBuilder的initialQuery属性设置默认值 #

这是优先级最高的实现方式，直接在组件初始化时传入预设的timeDimensions配置即可，代码示例：

import { QueryBuilder } from '@cubejs-client/react';
import dayjs from 'dayjs';

// 计算当日的起止时间
const todayDateRange = [
  dayjs().startOf('day').format('YYYY-MM-DD'),
  dayjs().endOf('day').format('YYYY-MM-DD')
];

function YourComponent() {
  return (
    <QueryBuilder
      // 其他原有属性保持不变
      initialQuery={{
        timeDimensions: [
          {
            dimension: 'EMSHistory.startTime',
            granularity: 'day', // 可根据业务需求调整聚合粒度
            dateRange: todayDateRange
          }
        ]
        // 有默认要选中的指标、维度也可以同步加在initialQuery中
      }}
    >
      {/* 原有子组件内容 */}
    </QueryBuilder>
  )
}

如果Cube.js schema是异步加载的，可能出现初始值被覆盖的问题，可采用方案2处理。

方案2：schema加载完成后手动设置默认查询 #

通过setQuery方法在schema就绪后强制注入默认时间维度配置，避免异步加载导致的初始值失效：

import { QueryBuilder } from '@cubejs-client/react';
import { useEffect, useState } from 'react';
import dayjs from 'dayjs';

const todayDateRange = [
  dayjs().startOf('day').format('YYYY-MM-DD'),
  dayjs().endOf('day').format('YYYY-MM-DD')
];

function YourComponent() {
  const [isSchemaLoaded, setIsSchemaLoaded] = useState(false);

  return (
    <QueryBuilder
      // 其他原有属性
      onSchemaLoad={() => setIsSchemaLoaded(true)}
    >
      {({ setQuery, query }) => {
        useEffect(() => {
          // 仅在schema首次加载、且查询无时间维度时设置默认值，避免覆盖用户手动选择的配置
          if (isSchemaLoaded && !query.timeDimensions?.length) {
            setQuery({
              ...query,
              timeDimensions: [
                {
                  dimension: 'EMSHistory.startTime',
                  granularity: 'day',
                  dateRange: todayDateRange
                }
              ]
            })
          }
        }, [isSchemaLoaded, query, setQuery])

        return (
          {/* 原有子组件渲染内容 */}
        )
      }}
    </QueryBuilder>
  )
}

方案3：查询请求拦截注入默认值 #

如果不需要在QueryBuilder的UI上展示选中的日期范围，仅需要最终提交的查询符合要求，可以在客户端层面统一拦截处理：

// 初始化cubejs客户端时添加请求拦截器
const cubejsApi = cubejs('你的API_TOKEN', {
  apiUrl: '你的Cube服务地址',
  requestInterceptor: (request) => {
    const query = JSON.parse(request.body);
    // 检查查询是否未配置dateRange
    if (!query.timeDimensions?.[0]?.dateRange) {
      const today = [
        dayjs().startOf('day').format('YYYY-MM-DD'),
        dayjs().endOf('day').format('YYYY-MM-DD')
      ];
      query.timeDimensions = query.timeDimensions || [];
      query.timeDimensions[0] = {
        ...query.timeDimensions[0],
        dimension: 'EMSHistory.startTime',
        dateRange: today
      }
      request.body = JSON.stringify(query);
    }
    return request;
  }
})

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