{"record":{"id":"c7aca211ff4bc2ba","repo":"cube-js/cube","slug":"array-of-queries-is-not-supported","errorCode":null,"errorMessage":"Array of queries is not supported.","messagePattern":"Array of queries is not supported\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/cubejs-client-react/src/QueryBuilder.tsx","lineNumber":175,"sourceCode":"\n    // deprecated\n    query: null,\n    setQuery: null,\n    vizState: null,\n    setVizState: null,\n  };\n\n  // This is an anti-pattern, only kept for backward compatibility\n  // https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti-pattern-unconditionally-copying-props-to-state\n  static getDerivedStateFromProps(props: QueryBuilderProps, state: QueryBuilderInternalState) {\n    if (props.query || props.vizState) {\n      const nextState = {\n        ...state,\n        ...(props.vizState || {}),\n      };\n\n      if (Array.isArray(props.query)) {\n        throw new Error('Array of queries is not supported.');\n      }\n\n      return {\n        ...nextState,\n        query: {\n          ...nextState.query,\n          ...(props.query || {}),\n        },\n      };\n    }\n    return null;\n  }\n\n  static resolveMember(\n    type: QueryMemberType,\n    { meta, query }: ResolveMemberArgs\n  ): unknown[] {\n    if (!meta) {","sourceCodeStart":157,"sourceCodeEnd":193,"githubUrl":"https://github.com/cube-js/cube/blob/7d981676b36392fec34088b9afab6bdcad40207c/packages/cubejs-client-react/src/QueryBuilder.tsx#L157-L193","documentation":"@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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Pass a single query object to <QueryBuilder> — one component instance per query","Map over queries and render one <QueryRenderer query={q}/> per item","Use cubejsApi().load() directly for multi-query work outside QueryBuilder","Unwrap/sanitize array queries from stored vizState before passing as props"],"exampleFix":"// before\n<QueryBuilder query={[query1, query2]} />\n// after\n<>\n  <QueryRenderer query={query1} render={renderChart} />\n  <QueryRenderer query={query2} render={renderChart} />\n</>","handlingStrategy":"type-guard","validationCode":"const queries = Array.isArray(query) ? query : [query];\n// render one QueryRenderer per query","typeGuard":"function isSingleQuery(q: unknown): q is Record<string, unknown> {\n  return typeof q === 'object' && q !== null && !Array.isArray(q);\n}","tryCatchPattern":"// Thrown during render via getDerivedStateFromProps — guard at the call site\ntry {\n  ReactDOM.render(<QueryBuilder query={query} />, el);\n} catch (e) {\n  console.error('QueryBuilder requires a single query object', e);\n}","preventionTips":["Never pass arrays to <QueryBuilder>; use one component instance per query","Normalize persisted vizState before hydrating it into props","Add a runtime check on the query prop in any wrapper component you own"],"tags":["react","querybuilder","api-misuse"],"backgroundTag":"unsupported-query-shape","analyzedSha":"7d981676b36392fec34088b9afab6bdcad40207c","analyzedAt":"2026-09-02T03:45:10.400Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T15:18:49.778Z"}