@cubejs-client/react 0.30.46 → 0.30.69

package/dist/cubejs-client-react.esm.js

@@ -1,437 +1,256 @@
-import 'core-js/modules/es.reflect.construct.js';
-import 'core-js/modules/es.object.keys.js';
-import 'core-js/modules/es.symbol.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.object.get-own-property-descriptor.js';
-import 'core-js/modules/es.array.for-each.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
-import 'core-js/modules/es.object.get-own-property-descriptors.js';
-import 'core-js/modules/es.object.define-properties.js';
-import 'core-js/modules/es.object.define-property.js';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
-import _createClass from '@babel/runtime/helpers/createClass';
-import _inherits from '@babel/runtime/helpers/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.promise.js';
-import 'core-js/modules/es.string.iterator.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.date.to-string.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import React, { createContext, useRef, useEffect, useContext, useState } from 'react';
 import { equals, toPairs, fromPairs, uniqBy, prop, indexBy, uniq, pick, clone } from 'ramda';
-import { isQueryPresent, getQueryMembers, flattenFilters, moveItemInArray, movePivotItem, removeEmptyQueryFields, ResultSet, defaultOrder, validateQuery, defaultHeuristics, areQueriesEqual } from '@cubejs-client/core';
-import _typeof from '@babel/runtime/helpers/typeof';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.split.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.object.from-entries.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.array.is-array.js';
-import Anser from 'anser';
-import { encode } from 'html-entities';
-import _extends from '@babel/runtime/helpers/extends';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
-import 'core-js/modules/es.function.name.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.array.sort.js';
-import 'core-js/modules/es.array.find.js';
-import 'core-js/modules/es.array.reduce.js';
+import { isQueryPresent, getQueryMembers, flattenFilters, moveItemInArray, movePivotItem, removeEmptyQueryFields, defaultOrder, ResultSet, validateQuery, defaultHeuristics, areQueriesEqual } from '@cubejs-client/core';
 
 var CubeContext = /*#__PURE__*/createContext(null);
 
-var colors = {
-  reset: 'orange',
-  black: 'black',
-  red: 'red',
-  green: 'green',
-  yellow: 'orange',
-  blue: 'blue',
-  magenta: 'magenta',
-  cyan: 'cyan',
-  gray: 'gray',
-  lightgrey: 'lightgrey',
-  darkgrey: 'darkgrey'
-};
-var anserMap = {
-  'ansi-bright-black': 'black',
-  'ansi-bright-yellow': 'yellow',
-  'ansi-yellow': 'yellow',
-  'ansi-bright-green': 'green',
-  'ansi-green': 'green',
-  'ansi-bright-cyan': 'cyan',
-  'ansi-cyan': 'cyan',
-  'ansi-bright-red': 'red',
-  'ansi-red': 'red',
-  'ansi-bright-magenta': 'magenta',
-  'ansi-magenta': 'magenta',
-  'ansi-white': 'darkgrey'
-};
-function generateAnsiHTML(txt) {
-  var arr = new Anser().ansiToJson(encode(txt), {
-    use_classes: true
-  });
-  var result = '';
-  var open = false;
-
-  for (var index = 0; index < arr.length; ++index) {
-    var c = arr[index];
-    var content = c.content;
-    var fg = c.fg;
-    var contentParts = content.split('\n');
-
-    for (var j = 0; j < contentParts.length; ++j) {
-      if (!open) {
-        result += '<span data-ansi-line="true">';
-        open = true;
-      }
+class QueryRenderer extends React.Component {
+  static contextType = CubeContext;
+  static defaultProps = {
+    cubejsApi: null,
+    query: null,
+    render: null,
+    queries: null,
+    loadSql: null,
+    updateOnlyOnStateChange: false,
+    resetResultSetOnChange: true
+  }; // @deprected use `isQueryPresent` from `@cubejs-client/core`
+
+  static isQueryPresent(query) {
+    return isQueryPresent(query);
+  }
 
-      var part = contentParts[j].replace('\r', '');
-      var color = colors[anserMap[fg]];
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.mutexObj = {};
+  }
 
-      if (color != null) {
-        result += "<span style=\"color: ".concat(color, ";\">").concat(part, "</span>");
-      } else {
-        if (fg != null) {
-          console.log('Missing color mapping: ', fg);
-        }
+  componentDidMount() {
+    const {
+      query,
+      queries
+    } = this.props;
 
-        result += "<span>".concat(part, "</span>");
-      }
+    if (query) {
+      this.load(query);
+    }
 
-      if (j < contentParts.length - 1) {
-        result += '</span>';
-        open = false;
-        result += '<br/>';
-      }
+    if (queries) {
+      this.loadQueries(queries);
     }
   }
 
-  if (open) {
-    result += '</span>';
-  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const {
+      query,
+      queries,
+      render,
+      cubejsApi,
+      loadSql,
+      updateOnlyOnStateChange
+    } = this.props;
+
+    if (!updateOnlyOnStateChange) {
+      return true;
+    }
 
-  return result;
-}
-function removeEmpty(obj) {
-  if (_typeof(obj) !== 'object') {
-    return obj;
+    return !equals(nextProps.query, query) || !equals(nextProps.queries, queries) || (nextProps.render == null || render == null) && nextProps.render !== render || nextProps.cubejsApi !== cubejsApi || nextProps.loadSql !== loadSql || !equals(nextState, this.state) || nextProps.updateOnlyOnStateChange !== updateOnlyOnStateChange;
   }
 
-  return Object.fromEntries(Object.entries(obj).filter(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        v = _ref2[1];
-
-    return v != null;
-  }).map(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        k = _ref4[0],
-        v = _ref4[1];
+  componentDidUpdate(prevProps) {
+    const {
+      query,
+      queries
+    } = this.props;
 
-    if (Array.isArray(v)) {
-      return [k, v.map(removeEmpty)];
+    if (!equals(prevProps.query, query)) {
+      this.load(query);
     }
 
-    return [k, _typeof(v) === 'object' ? removeEmpty(v) : v];
-  }));
-}
-
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var QueryRenderer = /*#__PURE__*/function (_React$Component) {
-  _inherits(QueryRenderer, _React$Component);
-
-  var _super = _createSuper$1(QueryRenderer);
-
-  function QueryRenderer(props) {
-    var _this;
+    if (!equals(prevProps.queries, queries)) {
+      this.loadQueries(queries);
+    }
+  }
 
-    _classCallCheck(this, QueryRenderer);
+  cubejsApi() {
+    // eslint-disable-next-line react/destructuring-assignment
+    return this.props.cubejsApi || this.context && this.context.cubejsApi;
+  }
 
-    _this = _super.call(this, props);
-    _this.state = {};
-    _this.mutexObj = {};
-    return _this;
+  load(query) {
+    const {
+      resetResultSetOnChange
+    } = this.props;
+    this.setState({
+      isLoading: true,
+      error: null,
+      sqlQuery: null,
+      ...(resetResultSetOnChange ? {
+        resultSet: null
+      } : {})
+    });
+    const {
+      loadSql
+    } = this.props;
+    const cubejsApi = this.cubejsApi();
+
+    if (query && isQueryPresent(query)) {
+      if (loadSql === 'only') {
+        cubejsApi.sql(query, {
+          mutexObj: this.mutexObj,
+          mutexKey: 'sql'
+        }).then(sqlQuery => this.setState({
+          sqlQuery,
+          error: null,
+          isLoading: false
+        })).catch(error => this.setState({ ...(resetResultSetOnChange ? {
+            resultSet: null
+          } : {}),
+          error,
+          isLoading: false
+        }));
+      } else if (loadSql) {
+        Promise.all([cubejsApi.sql(query, {
+          mutexObj: this.mutexObj,
+          mutexKey: 'sql'
+        }), cubejsApi.load(query, {
+          mutexObj: this.mutexObj,
+          mutexKey: 'query'
+        })]).then(([sqlQuery, resultSet]) => this.setState({
+          sqlQuery,
+          resultSet,
+          error: null,
+          isLoading: false
+        })).catch(error => this.setState({ ...(resetResultSetOnChange ? {
+            resultSet: null
+          } : {}),
+          error,
+          isLoading: false
+        }));
+      } else {
+        cubejsApi.load(query, {
+          mutexObj: this.mutexObj,
+          mutexKey: 'query'
+        }).then(resultSet => this.setState({
+          resultSet,
+          error: null,
+          isLoading: false
+        })).catch(error => this.setState({ ...(resetResultSetOnChange ? {
+            resultSet: null
+          } : {}),
+          error,
+          isLoading: false
+        }));
+      }
+    }
   }
 
-  _createClass(QueryRenderer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-          query = _this$props.query,
-          queries = _this$props.queries;
+  loadQueries(queries) {
+    const cubejsApi = this.cubejsApi();
+    const {
+      resetResultSetOnChange
+    } = this.props;
+    this.setState({
+      isLoading: true,
+      ...(resetResultSetOnChange ? {
+        resultSet: null
+      } : {}),
+      error: null
+    });
+    const resultPromises = Promise.all(toPairs(queries).map(([name, query]) => cubejsApi.load(query, {
+      mutexObj: this.mutexObj,
+      mutexKey: name
+    }).then(r => [name, r])));
+    resultPromises.then(resultSet => this.setState({
+      resultSet: fromPairs(resultSet),
+      error: null,
+      isLoading: false
+    })).catch(error => this.setState({ ...(resetResultSetOnChange ? {
+        resultSet: null
+      } : {}),
+      error,
+      isLoading: false
+    }));
+  }
 
-      if (query) {
-        this.load(query);
-      }
+  render() {
+    const {
+      error,
+      queries,
+      resultSet,
+      isLoading,
+      sqlQuery
+    } = this.state;
+    const {
+      render
+    } = this.props;
+    const loadState = {
+      error: error ? new Error(error.response?.plainError || error.message || error.toString()) : null,
+      resultSet: queries ? resultSet || {} : resultSet,
+      loadingState: {
+        isLoading
+      },
+      sqlQuery
+    };
 
-      if (queries) {
-        this.loadQueries(queries);
-      }
+    if (render) {
+      return render(loadState);
     }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var _this$props2 = this.props,
-          query = _this$props2.query,
-          queries = _this$props2.queries,
-          render = _this$props2.render,
-          cubejsApi = _this$props2.cubejsApi,
-          loadSql = _this$props2.loadSql,
-          updateOnlyOnStateChange = _this$props2.updateOnlyOnStateChange;
-
-      if (!updateOnlyOnStateChange) {
-        return true;
-      }
 
-      return !equals(nextProps.query, query) || !equals(nextProps.queries, queries) || (nextProps.render == null || render == null) && nextProps.render !== render || nextProps.cubejsApi !== cubejsApi || nextProps.loadSql !== loadSql || !equals(nextState, this.state) || nextProps.updateOnlyOnStateChange !== updateOnlyOnStateChange;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props3 = this.props,
-          query = _this$props3.query,
-          queries = _this$props3.queries;
-
-      if (!equals(prevProps.query, query)) {
-        this.load(query);
-      }
+    return null;
+  }
 
-      if (!equals(prevProps.queries, queries)) {
-        this.loadQueries(queries);
-      }
-    }
-  }, {
-    key: "cubejsApi",
-    value: function cubejsApi() {
-      // eslint-disable-next-line react/destructuring-assignment
-      return this.props.cubejsApi || this.context && this.context.cubejsApi;
-    }
-  }, {
-    key: "load",
-    value: function load(query) {
-      var _this2 = this;
+}
 
-      var resetResultSetOnChange = this.props.resetResultSetOnChange;
-      this.setState(_objectSpread$6({
-        isLoading: true,
-        error: null,
-        sqlQuery: null
-      }, resetResultSetOnChange ? {
-        resultSet: null
-      } : {}));
-      var loadSql = this.props.loadSql;
-      var cubejsApi = this.cubejsApi();
-
-      if (query && isQueryPresent(query)) {
-        if (loadSql === 'only') {
-          cubejsApi.sql(query, {
-            mutexObj: this.mutexObj,
-            mutexKey: 'sql'
-          }).then(function (sqlQuery) {
-            return _this2.setState({
-              sqlQuery: sqlQuery,
-              error: null,
-              isLoading: false
-            });
-          })["catch"](function (error) {
-            return _this2.setState(_objectSpread$6(_objectSpread$6({}, resetResultSetOnChange ? {
-              resultSet: null
-            } : {}), {}, {
-              error: error,
-              isLoading: false
-            }));
-          });
-        } else if (loadSql) {
-          Promise.all([cubejsApi.sql(query, {
-            mutexObj: this.mutexObj,
-            mutexKey: 'sql'
-          }), cubejsApi.load(query, {
-            mutexObj: this.mutexObj,
-            mutexKey: 'query'
-          })]).then(function (_ref) {
-            var _ref2 = _slicedToArray(_ref, 2),
-                sqlQuery = _ref2[0],
-                resultSet = _ref2[1];
-
-            return _this2.setState({
-              sqlQuery: sqlQuery,
-              resultSet: resultSet,
-              error: null,
-              isLoading: false
-            });
-          })["catch"](function (error) {
-            return _this2.setState(_objectSpread$6(_objectSpread$6({}, resetResultSetOnChange ? {
-              resultSet: null
-            } : {}), {}, {
-              error: error,
-              isLoading: false
-            }));
-          });
-        } else {
-          cubejsApi.load(query, {
-            mutexObj: this.mutexObj,
-            mutexKey: 'query'
-          }).then(function (resultSet) {
-            return _this2.setState({
-              resultSet: resultSet,
-              error: null,
-              isLoading: false
-            });
-          })["catch"](function (error) {
-            return _this2.setState(_objectSpread$6(_objectSpread$6({}, resetResultSetOnChange ? {
-              resultSet: null
-            } : {}), {}, {
-              error: error,
-              isLoading: false
-            }));
-          });
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
         }
       }
     }
-  }, {
-    key: "loadQueries",
-    value: function loadQueries(queries) {
-      var _this3 = this;
-
-      var cubejsApi = this.cubejsApi();
-      var resetResultSetOnChange = this.props.resetResultSetOnChange;
-      this.setState(_objectSpread$6(_objectSpread$6({
-        isLoading: true
-      }, resetResultSetOnChange ? {
-        resultSet: null
-      } : {}), {}, {
-        error: null
-      }));
-      var resultPromises = Promise.all(toPairs(queries).map(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-            name = _ref4[0],
-            query = _ref4[1];
-
-        return cubejsApi.load(query, {
-          mutexObj: _this3.mutexObj,
-          mutexKey: name
-        }).then(function (r) {
-          return [name, r];
-        });
-      }));
-      resultPromises.then(function (resultSet) {
-        return _this3.setState({
-          resultSet: fromPairs(resultSet),
-          error: null,
-          isLoading: false
-        });
-      })["catch"](function (error) {
-        return _this3.setState(_objectSpread$6(_objectSpread$6({}, resetResultSetOnChange ? {
-          resultSet: null
-        } : {}), {}, {
-          error: error,
-          isLoading: false
-        }));
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state = this.state,
-          error = _this$state.error,
-          queries = _this$state.queries,
-          resultSet = _this$state.resultSet,
-          isLoading = _this$state.isLoading,
-          sqlQuery = _this$state.sqlQuery;
-      var render = this.props.render;
-      var loadState = {
-        error: error ? new Error(generateAnsiHTML(error.message || error.toString())) : null,
-        resultSet: queries ? resultSet || {} : resultSet,
-        loadingState: {
-          isLoading: isLoading
-        },
-        sqlQuery: sqlQuery
-      };
 
-      if (render) {
-        return render(loadState);
-      }
+    return target;
+  };
 
-      return null;
-    }
-  }], [{
-    key: "isQueryPresent",
-    value: // @deprected use `isQueryPresent` from `@cubejs-client/core`
-    function isQueryPresent$1(query) {
-      return isQueryPresent(query);
-    }
-  }]);
-
-  return QueryRenderer;
-}(React.Component);
-QueryRenderer.contextType = CubeContext;
-QueryRenderer.defaultProps = {
-  cubejsApi: null,
-  query: null,
-  render: null,
-  queries: null,
-  loadSql: null,
-  updateOnlyOnStateChange: false,
-  resetResultSetOnChange: true
-};
-
-var _excluded$1 = ["query"];
-
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var QueryRendererWithTotals = function QueryRendererWithTotals(_ref) {
-  var query = _ref.query,
-      restProps = _objectWithoutProperties(_ref, _excluded$1);
-
-  return /*#__PURE__*/React.createElement(QueryRenderer, _extends({
-    queries: {
-      totals: _objectSpread$5(_objectSpread$5({}, query), {}, {
-        dimensions: [],
-        timeDimensions: query.timeDimensions ? query.timeDimensions.map(function (td) {
-          return _objectSpread$5(_objectSpread$5({}, td), {}, {
-            granularity: null
-          });
-        }) : undefined
-      }),
-      main: query
-    }
-  }, restProps));
-};
+  return _extends.apply(this, arguments);
+}
 
-QueryRendererWithTotals.defaultProps = {
-  query: null,
-  render: null,
-  queries: null,
-  loadSql: null
-};
+const QueryRendererWithTotals = ({
+  query,
+  ...restProps
+}) => /*#__PURE__*/React.createElement(QueryRenderer, _extends({
+  queries: {
+    totals: { ...query,
+      dimensions: [],
+      timeDimensions: query.timeDimensions ? query.timeDimensions.map(td => ({ ...td,
+        granularity: null
+      })) : undefined
+    },
+    main: query
+  }
+}, restProps));
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function removeEmpty(obj) {
+  if (typeof obj !== 'object') {
+    return obj;
+  }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v != null).map(([k, v]) => {
+    if (Array.isArray(v)) {
+      return [k, v.map(removeEmpty)];
+    }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+    return [k, typeof v === 'object' ? removeEmpty(v) : v];
+  }));
+}
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var granularities = [{
+const granularities = [{
   name: undefined,
   title: 'w/o grouping'
 }, {
@@ -459,77 +278,79 @@ var granularities = [{
   name: 'year',
   title: 'Year'
 }];
+class QueryBuilder extends React.Component {
+  static contextType = CubeContext;
+  static defaultProps = {
+    cubejsApi: null,
+    stateChangeHeuristics: null,
+    disableHeuristics: false,
+    render: null,
+    wrapWithQueryRenderer: true,
+    defaultChartType: 'line',
+    defaultQuery: {},
+    initialVizState: null,
+    onVizStateChanged: null,
+    // deprecated
+    query: null,
+    setQuery: null,
+    vizState: null,
+    setVizState: null
+  }; // This is an anti-pattern, only kept for backward compatibility
+  // https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti-pattern-unconditionally-copying-props-to-state
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.query || props.vizState) {
+      const nextState = { ...state,
+        ...(props.vizState || {})
+      };
 
-var QueryBuilder = /*#__PURE__*/function (_React$Component) {
-  _inherits(QueryBuilder, _React$Component);
-
-  var _super = _createSuper(QueryBuilder);
+      if (Array.isArray(props.query)) {
+        throw new Error('Array of queries is not supported.');
+      }
 
-  function QueryBuilder(props) {
-    var _this;
+      return { ...nextState,
+        query: { ...nextState.query,
+          ...(props.query || {})
+        }
+      };
+    }
 
-    _classCallCheck(this, QueryBuilder);
+    return null;
+  }
 
-    _this = _super.call(this, props);
+  static resolveMember(type, {
+    meta,
+    query
+  }) {
+    if (!meta) {
+      return [];
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "fetchMeta", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var meta, metaError, metaErrorStack, _error$response, _error$response$stack;
+    if (Array.isArray(query)) {
+      return query.reduce((memo, currentQuery) => memo.concat(QueryBuilder.resolveMember(type, {
+        meta,
+        query: currentQuery
+      })), []);
+    }
 
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (_this.cubejsApi()) {
-                _context.next = 2;
-                break;
-              }
+    if (type === 'timeDimensions') {
+      return (query.timeDimensions || []).map((m, index) => ({ ...m,
+        dimension: { ...meta.resolveMember(m.dimension, 'dimensions'),
+          granularities
+        },
+        index
+      }));
+    }
 
-              return _context.abrupt("return");
-
-            case 2:
-              metaError = null;
-              metaErrorStack = null;
-              _context.prev = 4;
-
-              _this.setState({
-                isFetchingMeta: true
-              });
-
-              _context.next = 8;
-              return _this.cubejsApi().meta();
-
-            case 8:
-              meta = _context.sent;
-              _context.next = 15;
-              break;
-
-            case 11:
-              _context.prev = 11;
-              _context.t0 = _context["catch"](4);
-              metaError = _context.t0;
-              metaErrorStack = ((_error$response = _context.t0.response) === null || _error$response === void 0 ? void 0 : (_error$response$stack = _error$response.stack) === null || _error$response$stack === void 0 ? void 0 : _error$response$stack.replace(_context.t0.message || '', '')) || '';
-
-            case 15:
-              _this.setState({
-                meta: meta,
-                metaError: metaError ? new Error(generateAnsiHTML(metaError.message || metaError.toString())) : null,
-                metaErrorStack: metaErrorStack,
-                isFetchingMeta: false
-              }, function () {
-                // Run update query to force viz state update
-                // This will catch any new missing members, and also validate the query against the new meta
-                _this.updateQuery({});
-              });
-
-            case 16:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[4, 11]]);
-    })));
+    return (query[type] || []).map((m, index) => ({
+      index,
+      ...meta.resolveMember(m, type)
+    }));
+  }
 
-    _this.state = _objectSpread$4(_objectSpread$4({
+  constructor(props) {
+    super(props);
+    this.state = {
       query: props.defaultQuery || props.query,
       chartType: props.defaultChartType,
       validatedQuery: props.query,
@@ -537,705 +358,540 @@ var QueryBuilder = /*#__PURE__*/function (_React$Component) {
       missingMembers: [],
       // todo: rename to `isMetaReady`
       isFetchingMeta: true,
-      dryRunResponse: null
-    }, props.vizState), props.initialVizState);
-    _this.mutexObj = {};
-    _this.orderMembersOrderKeys = [];
-    return _this;
+      dryRunResponse: null,
+      ...props.vizState,
+      // deprecated
+      ...props.initialVizState
+    };
+    this.mutexObj = {};
+    this.orderMembersOrderKeys = [];
   }
 
-  _createClass(QueryBuilder, [{
-    key: "componentDidMount",
-    value: function () {
-      var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                this.prevContext = this.context;
-                _context2.next = 3;
-                return this.fetchMeta();
-
-              case 3:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, this);
-      }));
-
-      function componentDidMount() {
-        return _componentDidMount.apply(this, arguments);
-      }
-
-      return componentDidMount;
-    }()
-  }, {
-    key: "componentDidUpdate",
-    value: function () {
-      var _componentDidUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(prevProps) {
-        var _this$prevContext,
-            _this$context,
-            _this2 = this;
-
-        var _this$props, schemaVersion, onSchemaChange, meta, newMeta;
-
-        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                _this$props = this.props, schemaVersion = _this$props.schemaVersion, onSchemaChange = _this$props.onSchemaChange;
-                meta = this.state.meta;
-
-                if (!(((_this$prevContext = this.prevContext) === null || _this$prevContext === void 0 ? void 0 : _this$prevContext.cubejsApi) !== ((_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.cubejsApi))) {
-                  _context4.next = 6;
-                  break;
-                }
-
-                this.prevContext = this.context;
-                _context4.next = 6;
-                return this.fetchMeta();
-
-              case 6:
-                if (!(prevProps.schemaVersion !== schemaVersion)) {
-                  _context4.next = 17;
-                  break;
-                }
-
-                _context4.prev = 7;
-                _context4.next = 10;
-                return this.cubejsApi().meta();
-
-              case 10:
-                newMeta = _context4.sent;
-
-                if (!equals(newMeta, meta) && typeof onSchemaChange === 'function') {
-                  onSchemaChange({
-                    schemaVersion: schemaVersion,
-                    refresh: function () {
-                      var _refresh = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-                        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                          while (1) {
-                            switch (_context3.prev = _context3.next) {
-                              case 0:
-                                _context3.next = 2;
-                                return _this2.fetchMeta();
-
-                              case 2:
-                              case "end":
-                                return _context3.stop();
-                            }
-                          }
-                        }, _callee3);
-                      }));
-
-                      function refresh() {
-                        return _refresh.apply(this, arguments);
-                      }
-
-                      return refresh;
-                    }()
-                  });
-                }
+  async componentDidMount() {
+    this.prevContext = this.context;
+    await this.fetchMeta();
+  }
 
-                _context4.next = 17;
-                break;
+  async componentDidUpdate(prevProps) {
+    const {
+      schemaVersion,
+      onSchemaChange
+    } = this.props;
+    const {
+      meta
+    } = this.state;
+
+    if (this.prevContext?.cubejsApi !== this.context?.cubejsApi) {
+      this.prevContext = this.context;
+      await this.fetchMeta();
+    }
 
-              case 14:
-                _context4.prev = 14;
-                _context4.t0 = _context4["catch"](7);
-                // eslint-disable-next-line
-                this.setState({
-                  metaError: _context4.t0
-                });
+    if (prevProps.schemaVersion !== schemaVersion) {
+      try {
+        const newMeta = await this.cubejsApi().meta();
 
-              case 17:
-              case "end":
-                return _context4.stop();
+        if (!equals(newMeta, meta) && typeof onSchemaChange === 'function') {
+          onSchemaChange({
+            schemaVersion,
+            refresh: async () => {
+              await this.fetchMeta();
             }
-          }
-        }, _callee4, this, [[7, 14]]);
-      }));
-
-      function componentDidUpdate(_x) {
-        return _componentDidUpdate.apply(this, arguments);
+          });
+        }
+      } catch (error) {
+        // eslint-disable-next-line
+        this.setState({
+          metaError: error
+        });
       }
+    }
+  }
 
-      return componentDidUpdate;
-    }()
-  }, {
-    key: "cubejsApi",
-    value: function cubejsApi() {
-      var cubejsApi = this.props.cubejsApi; // eslint-disable-next-line react/destructuring-assignment
+  fetchMeta = async () => {
+    if (!this.cubejsApi()) {
+      return;
+    }
+
+    let meta;
+    let metaError = null;
+    let richMetaError = null;
+    let metaErrorStack = null;
 
-      return cubejsApi || this.context && this.context.cubejsApi;
+    try {
+      this.setState({
+        isFetchingMeta: true
+      });
+      meta = await this.cubejsApi().meta();
+    } catch (error) {
+      metaError = error.response?.plainError || error;
+      richMetaError = error;
+      metaErrorStack = error.response?.stack?.replace(error.message || '', '') || '';
     }
-  }, {
-    key: "getMissingMembers",
-    value: function getMissingMembers(query, meta) {
-      if (!meta) {
-        return [];
-      }
 
-      return getQueryMembers(query).map(function (member) {
-        var resolvedMember = meta.resolveMember(member, ['measures', 'dimensions', 'segments']);
+    this.setState({
+      meta,
+      metaError: metaError ? new Error(metaError.message || metaError.toString()) : null,
+      richMetaError,
+      metaErrorStack,
+      isFetchingMeta: false
+    }, () => {
+      // Run update query to force viz state update
+      // This will catch any new missing members, and also validate the query against the new meta
+      this.updateQuery({});
+    });
+  };
 
-        if (resolvedMember.error) {
-          return member;
-        }
+  cubejsApi() {
+    const {
+      cubejsApi
+    } = this.props; // eslint-disable-next-line react/destructuring-assignment
 
-        return false;
-      }).filter(Boolean);
-    }
-  }, {
-    key: "isQueryPresent",
-    value: function isQueryPresent() {
-      var query = this.state.query;
-      return QueryRenderer.isQueryPresent(query);
+    return cubejsApi || this.context && this.context.cubejsApi;
+  }
+
+  getMissingMembers(query, meta) {
+    if (!meta) {
+      return [];
     }
-  }, {
-    key: "prepareRenderProps",
-    value: function prepareRenderProps(queryRendererProps) {
-      var _this3 = this;
 
-      var getName = function getName(member) {
-        return member.name;
-      };
+    return getQueryMembers(query).map(member => {
+      const resolvedMember = meta.resolveMember(member, ['measures', 'dimensions', 'segments']);
 
-      var toTimeDimension = function toTimeDimension(member) {
-        var rangeSelection = member.compareDateRange ? {
-          compareDateRange: member.compareDateRange
-        } : {
-          dateRange: member.dateRange
-        };
-        return removeEmpty(_objectSpread$4({
-          dimension: member.dimension.name,
-          granularity: member.granularity
-        }, rangeSelection));
-      };
+      if (resolvedMember.error) {
+        return member;
+      }
 
-      var toFilter = function toFilter(member) {
-        var _member$member, _member$dimension;
+      return false;
+    }).filter(Boolean);
+  }
 
-        return {
-          member: ((_member$member = member.member) === null || _member$member === void 0 ? void 0 : _member$member.name) || ((_member$dimension = member.dimension) === null || _member$dimension === void 0 ? void 0 : _member$dimension.name),
-          operator: member.operator,
-          values: member.values
-        };
-      };
+  isQueryPresent() {
+    const {
+      query
+    } = this.state;
+    return QueryRenderer.isQueryPresent(query);
+  }
 
-      var updateMethods = function updateMethods(memberType) {
-        var toQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getName;
-        return {
-          add: function add(member) {
-            var query = _this3.state.query;
-
-            _this3.updateQuery(_defineProperty({}, memberType, (query[memberType] || []).concat(toQuery(member))));
-          },
-          remove: function remove(member) {
-            var query = _this3.state.query;
-            return _this3.updateQuery(_defineProperty({}, memberType, (query[memberType] || []).filter(function (_, index) {
-              return index !== member.index;
-            })));
-          },
-          update: function update(member, updateWith) {
-            var query = _this3.state.query;
-            var members = (query[memberType] || []).concat([]);
-            members.splice(member.index, 1, toQuery(updateWith));
-            return _this3.updateQuery(_defineProperty({}, memberType, members));
-          }
-        };
+  prepareRenderProps(queryRendererProps) {
+    const getName = member => member.name;
+
+    const toTimeDimension = member => {
+      const rangeSelection = member.compareDateRange ? {
+        compareDateRange: member.compareDateRange
+      } : {
+        dateRange: member.dateRange
       };
+      return removeEmpty({
+        dimension: member.dimension.name,
+        granularity: member.granularity,
+        ...rangeSelection
+      });
+    };
 
-      var _this$state = this.state,
-          meta = _this$state.meta,
-          metaError = _this$state.metaError,
-          query = _this$state.query,
-          queryError = _this$state.queryError,
-          chartType = _this$state.chartType,
-          pivotConfig = _this$state.pivotConfig,
-          validatedQuery = _this$state.validatedQuery,
-          missingMembers = _this$state.missingMembers,
-          isFetchingMeta = _this$state.isFetchingMeta,
-          dryRunResponse = _this$state.dryRunResponse,
-          metaErrorStack = _this$state.metaErrorStack;
-      var flatFilters = uniqBy(function (filter) {
-        return "".concat(prop('member', filter)).concat(prop('operator', filter));
-      }, flattenFilters(meta && query.filters || []).map(function (filter) {
-        return _objectSpread$4(_objectSpread$4({}, filter), {}, {
-          member: filter.member || filter.dimension
+    const toFilter = member => ({
+      member: member.member?.name || member.dimension?.name,
+      operator: member.operator,
+      values: member.values
+    });
+
+    const updateMethods = (memberType, toQuery = getName) => ({
+      add: member => {
+        const {
+          query
+        } = this.state;
+        this.updateQuery({
+          [memberType]: (query[memberType] || []).concat(toQuery(member))
         });
-      }));
-      var filters = flatFilters.map(function (m, i) {
-        return _objectSpread$4(_objectSpread$4({}, m), {}, {
-          dimension: meta.resolveMember(m.member || m.dimension, ['dimensions', 'measures']),
-          operators: meta.filterOperatorsForMember(m.member || m.dimension, ['dimensions', 'measures']),
-          index: i
+      },
+      remove: member => {
+        const {
+          query
+        } = this.state;
+        return this.updateQuery({
+          [memberType]: (query[memberType] || []).filter((_, index) => index !== member.index)
         });
-      });
-      var measures = QueryBuilder.resolveMember('measures', this.state);
-      var dimensions = QueryBuilder.resolveMember('dimensions', this.state);
-      var timeDimensions = QueryBuilder.resolveMember('timeDimensions', this.state);
-      var segments = (meta && query.segments || []).map(function (m, i) {
-        return _objectSpread$4({
-          index: i
-        }, meta.resolveMember(m, 'segments'));
-      });
-      var availableMeasures = [];
-      var availableDimensions = [];
-      var availableSegments = [];
-      var availableFilterMembers = [];
-      var availableMembers = (meta === null || meta === void 0 ? void 0 : meta.membersGroupedByCube()) || {
-        measures: [],
-        dimensions: [],
-        segments: [],
-        timeDimensions: []
-      };
-
-      if (meta) {
-        availableMeasures = meta.membersForQuery(query, 'measures');
-        availableDimensions = meta.membersForQuery(query, 'dimensions');
-        availableSegments = meta.membersForQuery(query, 'segments');
-        var indexedMeasures = indexBy(prop('cubeName'), availableMembers.measures);
-        var indexedDimensions = indexBy(prop('cubeName'), availableMembers.dimensions);
-        var cubeNames = uniq([].concat(_toConsumableArray(Object.keys(indexedMeasures)), _toConsumableArray(Object.keys(indexedDimensions)))).sort();
-        availableFilterMembers = cubeNames.map(function (name) {
-          var _indexedMeasures$name, _indexedDimensions$na;
-
-          var cube = indexedMeasures[name] || indexedDimensions[name];
-          return _objectSpread$4(_objectSpread$4({}, cube), {}, {
-            members: [].concat(_toConsumableArray((_indexedMeasures$name = indexedMeasures[name]) === null || _indexedMeasures$name === void 0 ? void 0 : _indexedMeasures$name.members), _toConsumableArray((_indexedDimensions$na = indexedDimensions[name]) === null || _indexedDimensions$na === void 0 ? void 0 : _indexedDimensions$na.members)).sort(function (a, b) {
-              return a.shortTitle > b.shortTitle ? 1 : -1;
-            })
-          });
+      },
+      update: (member, updateWith) => {
+        const {
+          query
+        } = this.state;
+        const members = (query[memberType] || []).concat([]);
+        members.splice(member.index, 1, toQuery(updateWith));
+        return this.updateQuery({
+          [memberType]: members
         });
       }
+    });
+
+    const {
+      meta,
+      metaError,
+      richMetaError,
+      query,
+      queryError,
+      chartType,
+      pivotConfig,
+      validatedQuery,
+      missingMembers,
+      isFetchingMeta,
+      dryRunResponse,
+      metaErrorStack
+    } = this.state;
+    const flatFilters = uniqBy(filter => `${prop('member', filter)}${prop('operator', filter)}`, flattenFilters(meta && query.filters || []).map(filter => ({ ...filter,
+      member: filter.member || filter.dimension
+    })));
+    const filters = flatFilters.map((m, i) => ({ ...m,
+      dimension: meta.resolveMember(m.member || m.dimension, ['dimensions', 'measures']),
+      operators: meta.filterOperatorsForMember(m.member || m.dimension, ['dimensions', 'measures']),
+      index: i
+    }));
+    const measures = QueryBuilder.resolveMember('measures', this.state);
+    const dimensions = QueryBuilder.resolveMember('dimensions', this.state);
+    const timeDimensions = QueryBuilder.resolveMember('timeDimensions', this.state);
+    const segments = (meta && query.segments || []).map((m, i) => ({
+      index: i,
+      ...meta.resolveMember(m, 'segments')
+    }));
+    let availableMeasures = [];
+    let availableDimensions = [];
+    let availableSegments = [];
+    let availableFilterMembers = [];
+    const availableMembers = meta?.membersGroupedByCube() || {
+      measures: [],
+      dimensions: [],
+      segments: [],
+      timeDimensions: []
+    };
 
-      var activeOrder = Array.isArray(query.order) ? Object.fromEntries(query.order) : query.order;
-      var members = [].concat(_toConsumableArray(measures), _toConsumableArray(dimensions), _toConsumableArray(timeDimensions.map(function (_ref2) {
-        var dimension = _ref2.dimension;
-        return dimension;
-      })));
-      var orderMembers = uniqBy(prop('id'), _toConsumableArray(members.map(function (_ref3) {
-        var name = _ref3.name,
-            title = _ref3.title;
-        return {
-          id: name,
-          title: title,
-          order: (activeOrder === null || activeOrder === void 0 ? void 0 : activeOrder[name]) || 'none'
+    if (meta) {
+      availableMeasures = meta.membersForQuery(query, 'measures');
+      availableDimensions = meta.membersForQuery(query, 'dimensions');
+      availableSegments = meta.membersForQuery(query, 'segments');
+      const indexedMeasures = indexBy(prop('cubeName'), availableMembers.measures);
+      const indexedDimensions = indexBy(prop('cubeName'), availableMembers.dimensions);
+      const cubeNames = uniq([...Object.keys(indexedMeasures), ...Object.keys(indexedDimensions)]).sort();
+      availableFilterMembers = cubeNames.map(name => {
+        const cube = indexedMeasures[name] || indexedDimensions[name];
+        return { ...cube,
+          members: [...indexedMeasures[name]?.members, ...indexedDimensions[name]?.members].sort((a, b) => a.shortTitle > b.shortTitle ? 1 : -1)
         };
-      })));
+      });
+    }
 
-      if (this.orderMembersOrderKeys.length !== orderMembers.length) {
-        this.orderMembersOrderKeys = orderMembers.map(function (_ref4) {
-          var id = _ref4.id;
-          return id;
-        });
-      }
+    const activeOrder = Array.isArray(query.order) ? Object.fromEntries(query.order) : query.order;
+    const members = [...measures, ...dimensions, ...timeDimensions.map(({
+      dimension
+    }) => dimension)];
+    let orderMembers = uniqBy(prop('id'), [// uniqBy prefers first, so these will only be added if not already in the query
+    ...members.map(({
+      name,
+      title
+    }) => ({
+      id: name,
+      title,
+      order: activeOrder?.[name] || 'none'
+    }))]);
+
+    if (this.orderMembersOrderKeys.length !== orderMembers.length) {
+      this.orderMembersOrderKeys = orderMembers.map(({
+        id
+      }) => id);
+    }
 
-      if (this.orderMembersOrderKeys.length) {
-        // Preserve order until the members change or manually re-ordered
-        // This is needed so that when an order member becomes active, it doesn't jump to the top of the list
-        orderMembers = (this.orderMembersOrderKeys || []).map(function (id) {
-          return orderMembers.find(function (member) {
-            return member.id === id;
-          });
-        });
-      }
+    if (this.orderMembersOrderKeys.length) {
+      // Preserve order until the members change or manually re-ordered
+      // This is needed so that when an order member becomes active, it doesn't jump to the top of the list
+      orderMembers = (this.orderMembersOrderKeys || []).map(id => orderMembers.find(member => member.id === id));
+    }
 
-      return _objectSpread$4({
-        meta: meta,
-        metaError: metaError,
-        metaErrorStack: metaErrorStack,
-        query: query,
-        error: queryError,
-        // Match same name as QueryRenderer prop
-        validatedQuery: validatedQuery,
-        isQueryPresent: this.isQueryPresent(),
-        chartType: chartType,
-        measures: measures,
-        dimensions: dimensions,
-        timeDimensions: timeDimensions,
-        segments: segments,
-        filters: filters,
-        orderMembers: orderMembers,
-        availableMeasures: availableMeasures,
-        availableDimensions: availableDimensions,
-        availableTimeDimensions: availableDimensions.filter(function (m) {
-          return m.type === 'time';
-        }),
-        availableSegments: availableSegments,
-        availableMembers: availableMembers,
-        availableFilterMembers: availableFilterMembers,
-        updateQuery: function updateQuery(queryUpdate) {
-          return _this3.updateQuery(queryUpdate);
-        },
-        updateMeasures: updateMethods('measures'),
-        updateDimensions: updateMethods('dimensions'),
-        updateSegments: updateMethods('segments'),
-        updateTimeDimensions: updateMethods('timeDimensions', toTimeDimension),
-        updateFilters: updateMethods('filters', toFilter),
-        updateChartType: function updateChartType(newChartType) {
-          return _this3.updateVizState({
-            chartType: newChartType
+    return {
+      meta,
+      metaError,
+      richMetaError,
+      metaErrorStack,
+      query,
+      error: queryError,
+      // Match same name as QueryRenderer prop
+      validatedQuery,
+      isQueryPresent: this.isQueryPresent(),
+      chartType,
+      measures,
+      dimensions,
+      timeDimensions,
+      segments,
+      filters,
+      orderMembers,
+      availableMeasures,
+      availableDimensions,
+      availableTimeDimensions: availableDimensions.filter(m => m.type === 'time'),
+      availableSegments,
+      availableMembers,
+      availableFilterMembers,
+      updateQuery: queryUpdate => this.updateQuery(queryUpdate),
+      updateMeasures: updateMethods('measures'),
+      updateDimensions: updateMethods('dimensions'),
+      updateSegments: updateMethods('segments'),
+      updateTimeDimensions: updateMethods('timeDimensions', toTimeDimension),
+      updateFilters: updateMethods('filters', toFilter),
+      updateChartType: newChartType => this.updateVizState({
+        chartType: newChartType
+      }),
+      updateOrder: {
+        set: (memberId, newOrder = 'asc') => {
+          this.updateQuery({
+            order: orderMembers.map(orderMember => ({ ...orderMember,
+              order: orderMember.id === memberId ? newOrder : orderMember.order
+            })).reduce((acc, {
+              id,
+              order
+            }) => order !== 'none' ? [...acc, [id, order]] : acc, [])
           });
         },
-        updateOrder: {
-          set: function set(memberId) {
-            var newOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'asc';
-
-            _this3.updateQuery({
-              order: orderMembers.map(function (orderMember) {
-                return _objectSpread$4(_objectSpread$4({}, orderMember), {}, {
-                  order: orderMember.id === memberId ? newOrder : orderMember.order
-                });
-              }).reduce(function (acc, _ref5) {
-                var id = _ref5.id,
-                    order = _ref5.order;
-                return order !== 'none' ? [].concat(_toConsumableArray(acc), [[id, order]]) : acc;
-              }, [])
-            });
-          },
-          update: function update(order) {
-            _this3.updateQuery({
-              order: order
-            });
-          },
-          reorder: function reorder(sourceIndex, destinationIndex) {
-            if (sourceIndex == null || destinationIndex == null) {
-              return;
-            }
-
-            var nextArray = moveItemInArray(orderMembers, sourceIndex, destinationIndex);
-            _this3.orderMembersOrderKeys = nextArray.map(function (_ref6) {
-              var id = _ref6.id;
-              return id;
-            });
-
-            _this3.updateQuery({
-              order: nextArray.reduce(function (acc, _ref7) {
-                var id = _ref7.id,
-                    order = _ref7.order;
-                return order !== 'none' ? [].concat(_toConsumableArray(acc), [[id, order]]) : acc;
-              }, [])
-            });
-          }
+        update: order => {
+          this.updateQuery({
+            order
+          });
         },
-        pivotConfig: pivotConfig,
-        updatePivotConfig: {
-          moveItem: function moveItem(_ref8) {
-            var sourceIndex = _ref8.sourceIndex,
-                destinationIndex = _ref8.destinationIndex,
-                sourceAxis = _ref8.sourceAxis,
-                destinationAxis = _ref8.destinationAxis;
-
-            _this3.updateVizState({
-              pivotConfig: movePivotItem(pivotConfig, sourceIndex, destinationIndex, sourceAxis, destinationAxis)
-            });
-          },
-          update: function update(config) {
-            var limit = config.limit;
-
-            _this3.updateVizState(_objectSpread$4({
-              pivotConfig: _objectSpread$4(_objectSpread$4({}, pivotConfig), config)
-            }, limit ? {
-              query: _objectSpread$4(_objectSpread$4({}, query), {}, {
-                limit: limit
-              })
-            } : null));
+        reorder: (sourceIndex, destinationIndex) => {
+          if (sourceIndex == null || destinationIndex == null) {
+            return;
           }
-        },
-        missingMembers: missingMembers,
-        refresh: this.fetchMeta,
-        isFetchingMeta: isFetchingMeta,
-        dryRunResponse: dryRunResponse
-      }, queryRendererProps);
-    }
-  }, {
-    key: "updateQuery",
-    value: function updateQuery(queryUpdate) {
-      var query = this.state.query;
-      this.updateVizState({
-        query: removeEmptyQueryFields(_objectSpread$4(_objectSpread$4({}, query), queryUpdate))
-      });
-    }
-  }, {
-    key: "updateVizState",
-    value: function () {
-      var _updateVizState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(state) {
-        var _this4 = this;
-
-        var _this$props2, setQuery, setVizState, _this$state2, stateQuery, statePivotConfig, chartType, meta, finalState, vizStateSent, handleVizStateChange, runSetters, shouldFetchDryRun, response;
-
-        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-          while (1) {
-            switch (_context5.prev = _context5.next) {
-              case 0:
-                _this$props2 = this.props, setQuery = _this$props2.setQuery, setVizState = _this$props2.setVizState;
-                _this$state2 = this.state, stateQuery = _this$state2.query, statePivotConfig = _this$state2.pivotConfig, chartType = _this$state2.chartType, meta = _this$state2.meta;
-                finalState = this.applyStateChangeHeuristics(state);
-
-                if (!finalState.query) {
-                  finalState.query = _objectSpread$4({}, stateQuery);
-                }
-
-                vizStateSent = null;
 
-                handleVizStateChange = function handleVizStateChange(currentState) {
-                  var onVizStateChanged = _this4.props.onVizStateChanged;
+          const nextArray = moveItemInArray(orderMembers, sourceIndex, destinationIndex);
+          this.orderMembersOrderKeys = nextArray.map(({
+            id
+          }) => id);
+          this.updateQuery({
+            order: nextArray.reduce((acc, {
+              id,
+              order
+            }) => order !== 'none' ? [...acc, [id, order]] : acc, [])
+          });
+        }
+      },
+      pivotConfig,
+      updatePivotConfig: {
+        moveItem: ({
+          sourceIndex,
+          destinationIndex,
+          sourceAxis,
+          destinationAxis
+        }) => {
+          this.updateVizState({
+            pivotConfig: movePivotItem(pivotConfig, sourceIndex, destinationIndex, sourceAxis, destinationAxis)
+          });
+        },
+        update: config => {
+          const {
+            limit
+          } = config;
+          this.updateVizState({
+            pivotConfig: { ...pivotConfig,
+              ...config
+            },
+            ...(limit ? {
+              query: { ...query,
+                limit
+              }
+            } : null)
+          });
+        }
+      },
+      missingMembers,
+      refresh: this.fetchMeta,
+      isFetchingMeta,
+      dryRunResponse,
+      ...queryRendererProps
+    };
+  }
 
-                  if (onVizStateChanged) {
-                    var newVizState = pick(['chartType', 'pivotConfig', 'query'], currentState); // Don't run callbacks more than once unless the viz state has changed since last time
+  updateQuery(queryUpdate) {
+    const {
+      query
+    } = this.state;
+    this.updateVizState({
+      query: removeEmptyQueryFields({ ...query,
+        ...queryUpdate
+      })
+    });
+  }
 
-                    if (!vizStateSent || !equals(vizStateSent, newVizState)) {
-                      onVizStateChanged(newVizState); // use clone to make sure we don't save object references
+  async updateVizState(state) {
+    const {
+      setQuery,
+      setVizState
+    } = this.props;
+    const {
+      query: stateQuery,
+      pivotConfig: statePivotConfig,
+      chartType,
+      meta
+    } = this.state;
+    const finalState = this.applyStateChangeHeuristics(state);
+
+    if (!finalState.query) {
+      finalState.query = { ...stateQuery
+      };
+    }
 
-                      vizStateSent = clone(newVizState);
-                    }
-                  }
-                }; // deprecated, setters replaced by onVizStateChanged
+    let vizStateSent = null;
 
+    const handleVizStateChange = currentState => {
+      const {
+        onVizStateChanged
+      } = this.props;
 
-                runSetters = function runSetters(currentState) {
-                  if (setVizState) {
-                    setVizState(pick(['chartType', 'pivotConfig', 'query'], currentState));
-                  }
+      if (onVizStateChanged) {
+        const newVizState = pick(['chartType', 'pivotConfig', 'query'], currentState); // Don't run callbacks more than once unless the viz state has changed since last time
 
-                  if (currentState.query && setQuery) {
-                    setQuery(currentState.query);
-                  }
-                };
+        if (!vizStateSent || !equals(vizStateSent, newVizState)) {
+          onVizStateChanged(newVizState); // use clone to make sure we don't save object references
 
-                if (finalState.shouldApplyHeuristicOrder) {
-                  finalState.query.order = defaultOrder(finalState.query);
-                }
+          vizStateSent = clone(newVizState);
+        }
+      }
+    }; // deprecated, setters replaced by onVizStateChanged
 
-                finalState.pivotConfig = ResultSet.getNormalizedPivotConfig(finalState.query, finalState.pivotConfig !== undefined ? finalState.pivotConfig : statePivotConfig);
-                finalState.missingMembers = this.getMissingMembers(finalState.query, meta);
-                finalState.chartType = finalState.chartType || state.chartType || chartType; // deprecated
 
-                runSetters(_objectSpread$4(_objectSpread$4({}, state), {}, {
-                  query: finalState.query
-                })); // Update optimistically so that UI does not stutter
+    const runSetters = currentState => {
+      if (setVizState) {
+        setVizState(pick(['chartType', 'pivotConfig', 'query'], currentState));
+      }
 
-                this.setState(_objectSpread$4(_objectSpread$4({}, finalState), {}, {
-                  queryError: null
-                }));
-                handleVizStateChange(finalState);
-                shouldFetchDryRun = !equals(pick(['measures', 'dimensions', 'timeDimensions'], stateQuery), pick(['measures', 'dimensions', 'timeDimensions'], finalState.query));
+      if (currentState.query && setQuery) {
+        setQuery(currentState.query);
+      }
+    };
 
-                if (!(shouldFetchDryRun && isQueryPresent(finalState.query) && finalState.missingMembers.length === 0)) {
-                  _context5.next = 30;
-                  break;
-                }
+    if (finalState.shouldApplyHeuristicOrder) {
+      finalState.query.order = defaultOrder(finalState.query);
+    }
 
-                _context5.prev = 16;
-                _context5.next = 19;
-                return this.cubejsApi().dryRun(finalState.query, {
-                  mutexObj: this.mutexObj
-                });
+    finalState.pivotConfig = ResultSet.getNormalizedPivotConfig(finalState.query, finalState.pivotConfig !== undefined ? finalState.pivotConfig : statePivotConfig);
+    finalState.missingMembers = this.getMissingMembers(finalState.query, meta);
+    finalState.chartType = finalState.chartType || state.chartType || chartType; // deprecated
 
-              case 19:
-                response = _context5.sent;
+    runSetters({ ...state,
+      query: finalState.query
+    }); // Update optimistically so that UI does not stutter
 
-                if (finalState.shouldApplyHeuristicOrder) {
-                  finalState.query.order = (response.queryOrder || []).reduce(function (memo, current) {
-                    return _objectSpread$4(_objectSpread$4({}, memo), current);
-                  }, {});
-                }
+    this.setState({ ...finalState,
+      queryError: null
+    });
+    handleVizStateChange(finalState);
+    const shouldFetchDryRun = !equals(pick(['measures', 'dimensions', 'timeDimensions'], stateQuery), pick(['measures', 'dimensions', 'timeDimensions'], finalState.query));
 
-                finalState.pivotConfig = ResultSet.getNormalizedPivotConfig(response.pivotQuery, finalState.pivotConfig);
-                finalState.validatedQuery = this.validatedQuery(finalState);
-                finalState.dryRunResponse = response; // deprecated
+    if (shouldFetchDryRun && isQueryPresent(finalState.query) && finalState.missingMembers.length === 0) {
+      try {
+        const response = await this.cubejsApi().dryRun(finalState.query, {
+          mutexObj: this.mutexObj
+        });
 
-                if (isQueryPresent(stateQuery)) {
-                  runSetters(_objectSpread$4(_objectSpread$4({}, this.state), finalState));
-                }
+        if (finalState.shouldApplyHeuristicOrder) {
+          finalState.query.order = (response.queryOrder || []).reduce((memo, current) => ({ ...memo,
+            ...current
+          }), {});
+        }
 
-                _context5.next = 30;
-                break;
+        finalState.pivotConfig = ResultSet.getNormalizedPivotConfig(response.pivotQuery, finalState.pivotConfig);
+        finalState.validatedQuery = this.validatedQuery(finalState);
+        finalState.dryRunResponse = response; // deprecated
 
-              case 27:
-                _context5.prev = 27;
-                _context5.t0 = _context5["catch"](16);
-                this.setState({
-                  queryError: new Error(generateAnsiHTML(_context5.t0.message || _context5.t0.toString()))
-                });
+        if (isQueryPresent(stateQuery)) {
+          runSetters({ ...this.state,
+            ...finalState
+          });
+        }
+      } catch (error) {
+        this.setState({
+          queryError: new Error(error.response?.plainError || error.message),
+          richQueryError: new Error(error.message || error.toString())
+        });
+      }
+    }
 
-              case 30:
-                this.setState(finalState, function () {
-                  return handleVizStateChange(_this4.state);
-                });
+    this.setState(finalState, () => handleVizStateChange(this.state));
+  }
 
-              case 31:
-              case "end":
-                return _context5.stop();
-            }
-          }
-        }, _callee5, this, [[16, 27]]);
-      }));
+  validatedQuery(state) {
+    const {
+      query
+    } = state || this.state;
+    return validateQuery(query);
+  }
 
-      function updateVizState(_x2) {
-        return _updateVizState.apply(this, arguments);
-      }
+  defaultHeuristics(newState) {
+    const {
+      query,
+      sessionGranularity,
+      meta
+    } = this.state;
+    return defaultHeuristics(newState, query, {
+      meta,
+      sessionGranularity: sessionGranularity || 'day'
+    });
+  }
 
-      return updateVizState;
-    }()
-  }, {
-    key: "validatedQuery",
-    value: function validatedQuery(state) {
-      var _ref9 = state || this.state,
-          query = _ref9.query;
+  applyStateChangeHeuristics(newState) {
+    const {
+      stateChangeHeuristics,
+      disableHeuristics
+    } = this.props;
 
-      return validateQuery(query);
+    if (disableHeuristics) {
+      return newState;
     }
-  }, {
-    key: "defaultHeuristics",
-    value: function defaultHeuristics$1(newState) {
-      var _this$state3 = this.state,
-          query = _this$state3.query,
-          sessionGranularity = _this$state3.sessionGranularity,
-          meta = _this$state3.meta;
-      return defaultHeuristics(newState, query, {
-        meta: meta,
-        sessionGranularity: sessionGranularity || 'day'
-      });
-    }
-  }, {
-    key: "applyStateChangeHeuristics",
-    value: function applyStateChangeHeuristics(newState) {
-      var _this$props3 = this.props,
-          stateChangeHeuristics = _this$props3.stateChangeHeuristics,
-          disableHeuristics = _this$props3.disableHeuristics;
-
-      if (disableHeuristics) {
-        return newState;
-      }
 
-      return stateChangeHeuristics && stateChangeHeuristics(this.state, newState) || this.defaultHeuristics(newState);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this5 = this;
-
-      var query = this.state.query;
-      var _this$props4 = this.props,
-          cubejsApi = _this$props4.cubejsApi,
-          _render = _this$props4.render,
-          wrapWithQueryRenderer = _this$props4.wrapWithQueryRenderer;
-
-      if (wrapWithQueryRenderer) {
-        return /*#__PURE__*/React.createElement(QueryRenderer, {
-          query: query,
-          cubejsApi: cubejsApi,
-          resetResultSetOnChange: false,
-          render: function render(queryRendererProps) {
-            if (_render) {
-              return _render(_this5.prepareRenderProps(queryRendererProps));
-            }
+    return stateChangeHeuristics && stateChangeHeuristics(this.state, newState) || this.defaultHeuristics(newState);
+  }
 
-            return null;
+  render() {
+    const {
+      query
+    } = this.state;
+    const {
+      cubejsApi,
+      render,
+      wrapWithQueryRenderer
+    } = this.props;
+
+    if (wrapWithQueryRenderer) {
+      return /*#__PURE__*/React.createElement(QueryRenderer, {
+        query: query,
+        cubejsApi: cubejsApi,
+        resetResultSetOnChange: false,
+        render: queryRendererProps => {
+          if (render) {
+            return render(this.prepareRenderProps(queryRendererProps));
           }
-        });
-      } else {
-        if (_render) {
-          return _render(this.prepareRenderProps());
-        }
 
-        return null;
-      }
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: // This is an anti-pattern, only kept for backward compatibility
-    // https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti-pattern-unconditionally-copying-props-to-state
-    function getDerivedStateFromProps(props, state) {
-      if (props.query || props.vizState) {
-        var nextState = _objectSpread$4(_objectSpread$4({}, state), props.vizState || {});
-
-        if (Array.isArray(props.query)) {
-          throw new Error('Array of queries is not supported.');
+          return null;
         }
-
-        return _objectSpread$4(_objectSpread$4({}, nextState), {}, {
-          query: _objectSpread$4(_objectSpread$4({}, nextState.query), props.query || {})
-        });
+      });
+    } else {
+      if (render) {
+        return render(this.prepareRenderProps());
       }
 
       return null;
     }
-  }, {
-    key: "resolveMember",
-    value: function resolveMember(type, _ref10) {
-      var meta = _ref10.meta,
-          query = _ref10.query;
-
-      if (!meta) {
-        return [];
-      }
-
-      if (Array.isArray(query)) {
-        return query.reduce(function (memo, currentQuery) {
-          return memo.concat(QueryBuilder.resolveMember(type, {
-            meta: meta,
-            query: currentQuery
-          }));
-        }, []);
-      }
+  }
 
-      if (type === 'timeDimensions') {
-        return (query.timeDimensions || []).map(function (m, index) {
-          return _objectSpread$4(_objectSpread$4({}, m), {}, {
-            dimension: _objectSpread$4(_objectSpread$4({}, meta.resolveMember(m.dimension, 'dimensions')), {}, {
-              granularities: granularities
-            }),
-            index: index
-          });
-        });
-      }
+}
 
-      return (query[type] || []).map(function (m, index) {
-        return _objectSpread$4({
-          index: index
-        }, meta.resolveMember(m, type));
-      });
-    }
-  }]);
-
-  return QueryBuilder;
-}(React.Component);
-
-_defineProperty(QueryBuilder, "contextType", CubeContext);
-QueryBuilder.defaultProps = {
-  cubejsApi: null,
-  stateChangeHeuristics: null,
-  disableHeuristics: false,
-  render: null,
-  wrapWithQueryRenderer: true,
-  defaultChartType: 'line',
-  defaultQuery: {},
-  initialVizState: null,
-  onVizStateChanged: null,
-  // deprecated
-  query: null,
-  setQuery: null,
-  vizState: null,
-  setVizState: null
-};
-
-function CubeProvider(_ref) {
-  var cubejsApi = _ref.cubejsApi,
-      children = _ref.children;
+function CubeProvider({
+  cubejsApi,
+  children
+}) {
   return /*#__PURE__*/React.createElement(CubeContext.Provider, {
     value: {
-      cubejsApi: cubejsApi
+      cubejsApi
     }
   }, children);
 }
 
 function useDeepCompareMemoize(value) {
-  var ref = useRef([]);
+  const ref = useRef([]);
 
   if (!equals(value, ref.current)) {
     ref.current = value;
@@ -1245,388 +901,218 @@ function useDeepCompareMemoize(value) {
 }
 
 function useIsMounted() {
-  var isMounted = useRef(false);
-  useEffect(function () {
+  const isMounted = useRef(false);
+  useEffect(() => {
     isMounted.current = true;
-    return function () {
+    return () => {
       isMounted.current = false;
     };
   }, []);
-  return function () {
-    return isMounted.current;
-  };
+  return () => isMounted.current;
 }
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function useCubeFetch(method) {
-  var _options$query;
-
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var isMounted = useIsMounted();
-  var context = useContext(CubeContext);
-  var mutexRef = useRef({});
-
-  var _useState = useState({
+function useCubeFetch(method, options = {}) {
+  const isMounted = useIsMounted();
+  const context = useContext(CubeContext);
+  const mutexRef = useRef({});
+  const [response, setResponse] = useState({
     isLoading: false,
     response: null
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      response = _useState2[0],
-      setResponse = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
-
-  var _options$skip = options.skip,
-      skip = _options$skip === void 0 ? false : _options$skip;
-
-  function load() {
-    return _load.apply(this, arguments);
-  }
-
-  function _load() {
-    _load = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var loadOptions,
-          ignoreSkip,
-          cubejsApi,
-          query,
-          queryCondition,
-          coreOptions,
-          args,
-          _response,
-          _args = arguments;
-
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              loadOptions = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
-              ignoreSkip = _args.length > 1 && _args[1] !== undefined ? _args[1] : false;
-              cubejsApi = options.cubejsApi || (context === null || context === void 0 ? void 0 : context.cubejsApi);
-              query = loadOptions.query || options.query;
-              queryCondition = method === 'meta' ? true : query && isQueryPresent(query);
-
-              if (!(cubejsApi && (ignoreSkip || !skip) && queryCondition)) {
-                _context.next = 20;
-                break;
-              }
-
-              setError(null);
-              setResponse({
-                isLoading: true,
-                response: null
-              });
-              coreOptions = {
-                mutexObj: mutexRef.current,
-                mutexKey: method
-              };
-              args = method === 'meta' ? [coreOptions] : [query, coreOptions];
-              _context.prev = 10;
-              _context.next = 13;
-              return cubejsApi[method].apply(cubejsApi, args);
-
-            case 13:
-              _response = _context.sent;
-
-              if (isMounted()) {
-                setResponse({
-                  response: _response,
-                  isLoading: false
-                });
-              }
-
-              _context.next = 20;
-              break;
-
-            case 17:
-              _context.prev = 17;
-              _context.t0 = _context["catch"](10);
+  });
+  const [error, setError] = useState(null);
+  const {
+    skip = false
+  } = options;
+
+  async function load(loadOptions = {}, ignoreSkip = false) {
+    const cubejsApi = options.cubejsApi || context?.cubejsApi;
+    const query = loadOptions.query || options.query;
+    const queryCondition = method === 'meta' ? true : query && isQueryPresent(query);
+
+    if (cubejsApi && (ignoreSkip || !skip) && queryCondition) {
+      setError(null);
+      setResponse({
+        isLoading: true,
+        response: null
+      });
+      const coreOptions = {
+        mutexObj: mutexRef.current,
+        mutexKey: method
+      };
+      const args = method === 'meta' ? [coreOptions] : [query, coreOptions];
 
-              if (isMounted()) {
-                setError(_context.t0);
-                setResponse({
-                  isLoading: false,
-                  response: null
-                });
-              }
+      try {
+        const response = await cubejsApi[method](...args);
 
-            case 20:
-            case "end":
-              return _context.stop();
-          }
+        if (isMounted()) {
+          setResponse({
+            response,
+            isLoading: false
+          });
         }
-      }, _callee, null, [[10, 17]]);
-    }));
-    return _load.apply(this, arguments);
+      } catch (error) {
+        if (isMounted()) {
+          setError(error);
+          setResponse({
+            isLoading: false,
+            response: null
+          });
+        }
+      }
+    }
   }
 
-  useEffect(function () {
+  useEffect(() => {
     load();
-  }, useDeepCompareMemoize([Object.keys(((_options$query = options.query) === null || _options$query === void 0 ? void 0 : _options$query.order) || {}), options, context]));
-  return _objectSpread$3(_objectSpread$3({}, response), {}, {
-    error: error,
-    refetch: function refetch(options) {
-      return load(options, true);
-    }
-  });
+  }, useDeepCompareMemoize([Object.keys(options.query?.order || {}), options, context]));
+  return { ...response,
+    error,
+    refetch: options => load(options, true)
+  };
 }
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function useCubeSql(query) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useCubeFetch('sql', _objectSpread$2(_objectSpread$2({}, options), {}, {
-    query: query
-  }));
+function useCubeSql(query, options = {}) {
+  return useCubeFetch('sql', { ...options,
+    query
+  });
 }
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function useDryRun(query) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useCubeFetch('dryRun', _objectSpread$1(_objectSpread$1({}, options), {}, {
-    query: query
-  }));
+function useDryRun(query, options = {}) {
+  return useCubeFetch('dryRun', { ...options,
+    query
+  });
 }
 
-var _excluded = ["refetch"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function useLazyDryRun(query) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  var _useCubeFetch = useCubeFetch('dryRun', _objectSpread(_objectSpread({}, options), {}, {
-    query: query,
+function useLazyDryRun(query, options = {}) {
+  const {
+    refetch,
+    ...result
+  } = useCubeFetch('dryRun', { ...options,
+    query,
     skip: true
-  })),
-      refetch = _useCubeFetch.refetch,
-      result = _objectWithoutProperties(_useCubeFetch, _excluded);
-
+  });
   return [refetch, result];
 }
 
-function useCubeQuery(query) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var mutexRef = useRef({});
-  var isMounted = useIsMounted();
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentQuery = _useState2[0],
-      setCurrentQuery = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isLoading = _useState4[0],
-      setLoading = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      resultSet = _useState6[0],
-      setResultSet = _useState6[1];
-
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      progress = _useState8[0],
-      setProgress = _useState8[1];
-
-  var _useState9 = useState(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      error = _useState10[0],
-      setError = _useState10[1];
-
-  var context = useContext(CubeContext);
-  var subscribeRequest = null;
-
-  var progressCallback = function progressCallback(_ref) {
-    var progressResponse = _ref.progressResponse;
-    return setProgress(progressResponse);
-  };
-
-  function fetch() {
-    return _fetch.apply(this, arguments);
-  }
-
-  function _fetch() {
-    _fetch = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var resetResultSetOnChange, cubejsApi, response;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              resetResultSetOnChange = options.resetResultSetOnChange;
-              cubejsApi = options.cubejsApi || (context === null || context === void 0 ? void 0 : context.cubejsApi);
-
-              if (cubejsApi) {
-                _context2.next = 4;
-                break;
-              }
-
-              throw new Error('Cube.js API client is not provided');
-
-            case 4:
-              if (resetResultSetOnChange) {
-                setResultSet(null);
-              }
-
-              setError(null);
-              setLoading(true);
-              _context2.prev = 7;
-              _context2.next = 10;
-              return cubejsApi.load(query, {
-                mutexObj: mutexRef.current,
-                mutexKey: 'query',
-                progressCallback: progressCallback
-              });
+function useCubeQuery(query, options = {}) {
+  const mutexRef = useRef({});
+  const isMounted = useIsMounted();
+  const [currentQuery, setCurrentQuery] = useState(null);
+  const [isLoading, setLoading] = useState(false);
+  const [resultSet, setResultSet] = useState(null);
+  const [progress, setProgress] = useState(null);
+  const [error, setError] = useState(null);
+  const context = useContext(CubeContext);
+  let subscribeRequest = null;
+
+  const progressCallback = ({
+    progressResponse
+  }) => setProgress(progressResponse);
+
+  async function fetch() {
+    const {
+      resetResultSetOnChange
+    } = options;
+    const cubejsApi = options.cubejsApi || context?.cubejsApi;
 
-            case 10:
-              response = _context2.sent;
-
-              if (isMounted()) {
-                setResultSet(response);
-                setProgress(null);
-              }
+    if (!cubejsApi) {
+      throw new Error('Cube.js API client is not provided');
+    }
 
-              _context2.next = 17;
-              break;
+    if (resetResultSetOnChange) {
+      setResultSet(null);
+    }
 
-            case 14:
-              _context2.prev = 14;
-              _context2.t0 = _context2["catch"](7);
+    setError(null);
+    setLoading(true);
 
-              if (isMounted()) {
-                setError(_context2.t0);
-                setResultSet(null);
-                setProgress(null);
-              }
+    try {
+      const response = await cubejsApi.load(query, {
+        mutexObj: mutexRef.current,
+        mutexKey: 'query',
+        progressCallback
+      });
 
-            case 17:
-              if (isMounted()) {
-                setLoading(false);
-              }
+      if (isMounted()) {
+        setResultSet(response);
+        setProgress(null);
+      }
+    } catch (error) {
+      if (isMounted()) {
+        setError(error);
+        setResultSet(null);
+        setProgress(null);
+      }
+    }
 
-            case 18:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, null, [[7, 14]]);
-    }));
-    return _fetch.apply(this, arguments);
+    if (isMounted()) {
+      setLoading(false);
+    }
   }
 
-  useEffect(function () {
-    var _options$skip = options.skip,
-        skip = _options$skip === void 0 ? false : _options$skip,
-        resetResultSetOnChange = options.resetResultSetOnChange;
-    var cubejsApi = options.cubejsApi || (context === null || context === void 0 ? void 0 : context.cubejsApi);
+  useEffect(() => {
+    const {
+      skip = false,
+      resetResultSetOnChange
+    } = options;
+    const cubejsApi = options.cubejsApi || context?.cubejsApi;
 
     if (!cubejsApi) {
       throw new Error('Cube.js API client is not provided');
     }
 
-    function loadQuery() {
-      return _loadQuery.apply(this, arguments);
-    }
-
-    function _loadQuery() {
-      _loadQuery = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (!(!skip && isQueryPresent(query))) {
-                  _context.next = 20;
-                  break;
-                }
-
-                if (!areQueriesEqual(currentQuery, query)) {
-                  if (resetResultSetOnChange == null || resetResultSetOnChange) {
-                    setResultSet(null);
-                  }
-
-                  setCurrentQuery(query);
-                }
-
-                setError(null);
-                setLoading(true);
-                _context.prev = 4;
-
-                if (!subscribeRequest) {
-                  _context.next = 9;
-                  break;
-                }
+    async function loadQuery() {
+      if (!skip && isQueryPresent(query)) {
+        if (!areQueriesEqual(currentQuery, query)) {
+          if (resetResultSetOnChange == null || resetResultSetOnChange) {
+            setResultSet(null);
+          }
 
-                _context.next = 8;
-                return subscribeRequest.unsubscribe();
+          setCurrentQuery(query);
+        }
 
-              case 8:
-                subscribeRequest = null;
+        setError(null);
+        setLoading(true);
 
-              case 9:
-                if (!options.subscribe) {
-                  _context.next = 13;
-                  break;
-                }
+        try {
+          if (subscribeRequest) {
+            await subscribeRequest.unsubscribe();
+            subscribeRequest = null;
+          }
 
-                subscribeRequest = cubejsApi.subscribe(query, {
-                  mutexObj: mutexRef.current,
-                  mutexKey: 'query',
-                  progressCallback: progressCallback
-                }, function (e, result) {
-                  if (isMounted()) {
-                    if (e) {
-                      setError(e);
-                    } else {
-                      setResultSet(result);
-                    }
-
-                    setLoading(false);
-                    setProgress(null);
-                  }
-                });
-                _context.next = 15;
-                break;
-
-              case 13:
-                _context.next = 15;
-                return fetch();
-
-              case 15:
-                _context.next = 20;
-                break;
-
-              case 17:
-                _context.prev = 17;
-                _context.t0 = _context["catch"](4);
-
-                if (isMounted()) {
-                  setError(_context.t0);
-                  setResultSet(null);
-                  setLoading(false);
-                  setProgress(null);
+          if (options.subscribe) {
+            subscribeRequest = cubejsApi.subscribe(query, {
+              mutexObj: mutexRef.current,
+              mutexKey: 'query',
+              progressCallback
+            }, (e, result) => {
+              if (isMounted()) {
+                if (e) {
+                  setError(e);
+                } else {
+                  setResultSet(result);
                 }
 
-              case 20:
-              case "end":
-                return _context.stop();
-            }
+                setLoading(false);
+                setProgress(null);
+              }
+            });
+          } else {
+            await fetch();
           }
-        }, _callee, null, [[4, 17]]);
-      }));
-      return _loadQuery.apply(this, arguments);
+        } catch (e) {
+          if (isMounted()) {
+            setError(e);
+            setResultSet(null);
+            setLoading(false);
+            setProgress(null);
+          }
+        }
+      }
     }
 
     loadQuery();
-    return function () {
+    return () => {
       if (subscribeRequest) {
         subscribeRequest.unsubscribe();
         subscribeRequest = null;
@@ -1634,17 +1120,16 @@ function useCubeQuery(query) {
     };
   }, useDeepCompareMemoize([query, Object.keys(query && query.order || {}), options, context]));
   return {
-    isLoading: isLoading,
-    resultSet: resultSet,
-    error: error,
-    progress: progress,
+    isLoading,
+    resultSet,
+    error,
+    progress,
     previousQuery: currentQuery,
     refetch: fetch
   };
 }
 
-function useCubeMeta() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function useCubeMeta(options = {}) {
   return useCubeFetch('meta', options);
 }