Cube.js QueryBuilder does not rerender when new timeDimensions provided

Question

I'm trying to get cube.js client showing data filtered with data provided in timeDimensions props.

I'm trying all latest version.

I have tried QueryBuilder render props method updateTimeDimensions ( codesandbox ). Tried update time dimensions and pass to query props ( codesandbox ).

Here is the passing props version:

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);

Log show dateRange when changing date rage as expected. But cube.js component rerendering not triggered when changing date range.

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

When updateDateRange is called it overwrites whole query state of QueryBuilder which removes any measures set before. When you maintain query state outside of QueryBuilder you should pass setQuery to update your own state when it's changed by QueryBuilder : https://cube.dev/docs/@cubejs-client-react#query-builder-props

Please see updated example here: 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>
          )}
        />
      )}
    </>
  );
};