cube-js/cube · error · Error

Array of queries is not supported.

Error message

Array of queries is not supported.

What it means

@cubejs-client-react's <QueryBuilder> (packages/cubejs-client-react/src/QueryBuilder.tsx:175, getDerivedStateFromProps) manages exactly one query in its state. If the `query` prop is an array (multi-query form that only the low-level client accepts), it throws 'Array of queries is not supported.' during render.

Source

Thrown at packages/cubejs-client-react/src/QueryBuilder.tsx:175

    // 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: QueryBuilderProps, state: QueryBuilderInternalState) {
    if (props.query || props.vizState) {
      const nextState = {
        ...state,
        ...(props.vizState || {}),
      };

      if (Array.isArray(props.query)) {
        throw new Error('Array of queries is not supported.');
      }

      return {
        ...nextState,
        query: {
          ...nextState.query,
          ...(props.query || {}),
        },
      };
    }
    return null;
  }

  static resolveMember(
    type: QueryMemberType,
    { meta, query }: ResolveMemberArgs
  ): unknown[] {
    if (!meta) {

View on GitHub (pinned to 7d981676b3)

Solutions

1. Pass a single query object to <QueryBuilder> — one component instance per query
2. Map over queries and render one <QueryRenderer query={q}/> per item
3. Use cubejsApi().load() directly for multi-query work outside QueryBuilder
4. Unwrap/sanitize array queries from stored vizState before passing as props

Example fix

// before
<QueryBuilder query={[query1, query2]} />
// after
<>
  <QueryRenderer query={query1} render={renderChart} />
  <QueryRenderer query={query2} render={renderChart} />
</>

const queries = Array.isArray(query) ? query : [query];
// render one QueryRenderer per query

function isSingleQuery(q: unknown): q is Record<string, unknown> {
  return typeof q === 'object' && q !== null && !Array.isArray(q);
}

// Thrown during render via getDerivedStateFromProps — guard at the call site
try {
  ReactDOM.render(<QueryBuilder query={query} />, el);
} catch (e) {
  console.error('QueryBuilder requires a single query object', e);
}

When it happens

Trigger: Passing query={[q1, q2]} to <QueryBuilder> (or components built on it, like <QueryRenderer> with queryBuilder) instead of a single query object; also via a vizState prop containing an array query.

Common situations: Copy-pasting an array query used with cubejsApi().load() into React components; deserializing a saved dashboard/vizState that stored an array; trying to render multiple charts from one QueryBuilder.

Related errors

• Unsupported method: ${message.method}
• Query must be defined in options
• Method is not supported for a '${this.queryType}' query type
• Cube API client is not provided
• ${this.constructor} driver supports only rows upload

AI-assisted analysis of cube-js/cube@7d981676b3 (2026-09-02). Data as JSON: /api/errors/c7aca211ff4bc2ba. Report an issue: GitHub.