Cube.js QueryBuilder 不会在提供新的 timeDimensions 时重新呈现

Question

我正在尝试获取立方体.js客户端显示使用timeDimensionsprops中提供的数据过滤的数据。

我正在尝试所有最新版本。

我已经尝试QueryBuilder渲染道具方法updateTimeDimensions(代码沙箱(。尝试更新时间维度并传递给query道具(代码沙盒(。

这是传递道具版本：

const App = () => {
const [dateRange, updateDateRange] = useState([
moment("2019-01-01").format(defaultFormat),
moment('2019-04-01').format(defaultFormat)
]);
const query = {
timeDimensions: [
{
dimension: "LineItems.createdAt",
granularity: "month",
dateRange
}
]
}
console.log(query)
console.log(dateRange)
return (
<>
<RangePicker
defaultValue={[moment("2019-01-01"), moment('2019-04-01').startOf("day")]}
onChange={([startDate, endDate]) => {
updateDateRange([
startDate.format(defaultFormat),
endDate.format(defaultFormat)
]);
}}
/>
{dateRange && <QueryBuilder
query={query}
cubejsApi={cubejsApi}
render={({
resultSet,
measures,
availableMeasures,
updateMeasures
}) => (
<Layout.Content style={{ padding: "20px" }}>
<Select
mode="multiple"
style={{ width: "100%" }}
placeholder="Please select"
onSelect={m =>
updateMeasures.add(find(propEq("name", m))(availableMeasures))
}
onDeselect={m =>
updateMeasures.remove(
find(propEq("name", m))(availableMeasures)
)
}
>
{availableMeasures.map(measure => (
<Select.Option key={measure.name} value={measure.name}>
{measure.title}
</Select.Option>
))}
</Select>
<Divider />
{measures.length > 0 ? (
<ChartRenderer resultSet={resultSet} />
) : (
<Empty description="Select a measure and date range to get started" />
)}
</Layout.Content>
)}
/>}
</>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

按预期更改日期范围时，日志显示dateRange。但是更改日期范围时不会触发多维数据集.js组件重新呈现。

Object {timeDimensions: Array[1]}
["2019-01-01", "2019-04-01"]
Object {timeDimensions: Array[1]}
["2019-01-01", "2019-04-30"]
Object {timeDimensions: Array[1]}
["2019-01-01", "2019-05-31"]

Answer 1

当调用updateDateRange时，它会覆盖整个queryQueryBuilder状态，从而删除之前设置的任何measures。当您在QueryBuilder之外维护query状态时，您应该传递setQuery，以便在QueryBuilder更改时更新自己的状态：https://cube.dev/docs/@cubejs-client-react#query-builder-props

请在此处查看更新的示例：https://codesandbox.io/s/react-query-builder-with-cubejs-4jwj5

const App = () => {
const [dateRange, updateDateRange] = useState([
moment("2019-01-01").format(defaultFormat),
moment("2019-04-01").format(defaultFormat)
]);
const [query, setQuery] = useState({});
const applyNewQuery = query => {
let newQuery = query;
if (newQuery.timeDimensions && newQuery.timeDimensions[0]) {
newQuery = {
...newQuery,
timeDimensions: [
{
...newQuery.timeDimensions[0],
dateRange,
granularity: "month"
}
]
};
}
setQuery(newQuery);
};
useEffect(() => {
applyNewQuery(query);
}, [dateRange]);
return (
<>
<RangePicker
defaultValue={[
moment("2019-01-01"),
moment("2019-04-01").startOf("day")
]}
onChange={([startDate, endDate]) => {
updateDateRange([
startDate.format(defaultFormat),
endDate.format(defaultFormat)
]);
}}
/>
{dateRange && (
<QueryBuilder
query={query}
setQuery={applyNewQuery}
cubejsApi={cubejsApi}
render={({
resultSet,
measures,
availableMeasures,
updateMeasures
}) => (
<Layout.Content style={{ padding: "20px" }}>
<Select
mode="multiple"
style={{ width: "100%" }}
placeholder="Please select"
onSelect={m =>
updateMeasures.add(find(propEq("name", m))(availableMeasures))
}
onDeselect={m =>
updateMeasures.remove(
find(propEq("name", m))(availableMeasures)
)
}
>
{availableMeasures.map(measure => (
<Select.Option key={measure.name} value={measure.name}>
{measure.title}
</Select.Option>
))}
</Select>
<Divider />
{measures.length > 0 ? (
<ChartRenderer resultSet={resultSet} />
) : (
<Empty description="Select a measure and date range to get started" />
)}
</Layout.Content>
)}
/>
)}
</>
);
};