javascript - 当提供新的 timeDimensions 时，Cube.js QueryBuilder 不会重新呈现

Question

我正在尝试让 cube.js 客户端显示使用 timeDimensions Prop 中提供的数据过滤的数据。

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

我已经尝试了 QueryBuilder 呈现 Prop 方法 updateTimeDimensions ( codesandbox )。尝试更新时间维度并传递给 query 属性 ( codesandbox )。

这是传递的 Prop 版本:

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。但是更改日期范围时不会触发 cube.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 时，它会覆盖 QueryBuilder 的整个 query 状态，从而删除之前设置的任何 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>
          )}
        />
      )}
    </>
  );
};