Company
Date Published
Author
Artyom Keydunov
Word count
609
Language
English
Hacker News points
None

Summary

Starting with version 0.4, the React Cube client includes the `<QueryBuilder />` component, designed to facilitate the creation of interactive analytics query builders by abstracting state management and API calls to the Cube Backend. Utilizing render props, it offers flexibility for custom UI development without rendering elements itself. Developers can build their own query builders by setting up a Cube Backend, configuring environments, and using Cube.js schema to generate a dev server, accessible via Cube.js Playground, which serves as a development environment providing scaffolding for charts and a built-in query builder. The `<QueryBuilder />` acts as a data provider, and requires the `cubejsApi` prop, expecting an instance of the cube.js API client, while other properties like `measures`, `availableMeasures`, and `updateMeasures` help manage the state related to measures, dimensions, segments, time, filters, and chart types, allowing for a dynamic and interactive query building experience. This tutorial provides a comprehensive guide to creating a simple but functional query builder, with the option to explore more complex examples through the Cube Playground's source code on GitHub.