Edit this page

@cubejs-client/react

@cubejs-client/react provides React Components for easy Cube.js integration in a React app.

useCubeQueryTData›(query: Query, options?: UseCubeQueryOptions): UseCubeQueryResult‹TData›

A React hook for executing Cube.js queries

import React from 'react';
import { Table } from 'antd';
import { useCubeQuery }  from '@cubejs-client/react';

export default function App() {
  const { resultSet, isLoading, error } = useCubeQuery({
    measures: ['Orders.count'],
    dimensions: ['Orders.createdAt.month'],
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>{error.toString()}</div>;
  }

  if (!resultSet) {
    return null;
  }

  const dataSource = resultSet.tablePivot();
  const columns = resultSet.tableColumns();

  return <Table columns={columns} dataSource={dataSource} />;
}

Type parameters:

  • TData

NameTypeDescription
cubejsApi?CubejsApiA CubejsApi instance to use. Taken from the context if the param is not passed
resetResultSetOnChange?boolean-
skip?booleanQuery execution will be skipped when skip is set to true. You can use this flag to avoid sending incomplete queries.
subscribe?booleanWhen true the resultSet will be reset to null first

NameType
errorError | null
isLoadingboolean
resultSetResultSet‹TData› | null

isQueryPresent(query: Query): boolean

Checks whether the query is ready

QueryBuilder extends React.ComponentQueryBuilderProps, QueryBuilderState›:

<QueryBuilder /> is used to build interactive analytics query builders. It abstracts state management and API calls to Cube.js Backend. It uses render prop technique and doesn’t render anything itself, but calls the render function instead.

Example

Open in CodeSandbox

import React from 'react';
import ReactDOM from 'react-dom';
import { Layout, Divider, Empty, Select } from 'antd';
import { QueryBuilder } from '@cubejs-client/react';
import cubejs from '@cubejs-client/core';
import 'antd/dist/antd.css';

import ChartRenderer from './ChartRenderer';

const cubejsApi = cubejs('YOUR-CUBEJS-API-TOKEN', {
  apiUrl: 'http://localhost:4000/cubejs-api/v1',
});

const App = () => (
  <QueryBuilder
    query={{
      timeDimensions: [
        {
          dimension: 'LineItems.createdAt',
          granularity: 'month',
        },
      ],
    }}
    cubejsApi={cubejsApi}
    render={({ resultSet, measures, availableMeasures, updateMeasures }) => (
      <Layout.Content style={{ padding: '20px' }}>
        <Select
          mode="multiple"
          style={{ width: '100%' }}
          placeholder="Please select"
          onSelect={(measure) => updateMeasures.add(measure)}
          onDeselect={(measure) => updateMeasures.remove(measure)}
        >
          {availableMeasures.map((measure) => (
            <Select.Option key={measure.name} value={measure}>
              {measure.title}
            </Select.Option>
          ))}
        </Select>
        <Divider />
        {measures.length > 0 ? (
          <ChartRenderer resultSet={resultSet} />
        ) : (
          <Empty description="Select measure or dimension to get started" />
        )}
      </Layout.Content>
    )}
  />
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

NameTypeDescription
cubejsApiCubejsApiCubejsApi instance to use
defaultChartType?ChartType-
disableHeuristics?booleanDefaults to false. This means that the default heuristics will be applied. For example: when the query is empty and you select a measure that has a default time dimension it will be pushed to the query.
query?QueryDefault query
render(renderProps: QueryBuilderRenderProps) => React.ReactNode-
setQuery?(query: Query) => voidCalled by the QueryBuilder when the query state has changed. Use it when state is maintained outside of the QueryBuilder component.
setVizState?(vizState: VizState) => void-
stateChangeHeuristics?(state: QueryBuilderState) => QueryBuilderStateA function that accepts the newState just before it's applied. You can use it to override the defaultHeuristics or to tweak the query or the vizState in any way.
vizState?VizState-
wrapWithQueryRenderer?boolean-

NameTypeDescription
availableDimensionsTCubeDimension[]An array of available dimensions to select. They are loaded via the API from Cube.js Backend.
availableMeasuresTCubeMeasure[]An array of available measures to select. They are loaded via the API from Cube.js Backend.
availableSegmentsTCubeMember[]An array of available segments to select. They are loaded via the API from Cube.js Backend.
availableTimeDimensionsTCubeDimension[]An array of available time dimensions to select. They are loaded via the API from Cube.js Backend.
dimensionsstring[]-
isQueryPresentbooleanIndicates whether the query is ready to be displayed or not
measuresstring[]-
segmentsstring[]-
timeDimensionsFilter[]-
updateDimensionsMemberUpdater-
updateMeasuresMemberUpdater-
updateQuery(query: Query) => voidUsed for partial of full query update
updateSegmentsMemberUpdater-
updateTimeDimensionsMemberUpdater-

Ƭ QueryBuilderState: VizState & object

QueryRenderer extends React.ComponentQueryRendererProps›:

<QueryRenderer /> a react component that accepts a query, fetches the given query, and uses the render prop to render the resulting data

NameTypeDescription
cubejsApiCubejsApiCubejsApi instance to use
loadSql?"only" | booleanIndicates whether the generated by Cube.js SQL Code should be requested. See rest-api#sql. When set to only then only the request to /v1/sql will be performed. When set to true the sql request will be performed along with the query request. Will not be performed if set to false
queries?object-
queryQueryAnalytic query. Learn more about it's format
render(renderProps: QueryRendererRenderProps) => voidOutput of this function will be rendered by the QueryRenderer
resetResultSetOnChange?booleanWhen true the resultSet will be reset to null first on every state change
updateOnlyOnStateChange?boolean-

NameType
errorError | null
loadingStateTLoadingState
resultSetResultSet | null

CubeProvider: React.FC‹CubeProviderProps

Cube.js context provider

import React from 'react';
import cubejs from '@cubejs-client/core';
import { CubeProvider } from '@cubejs-client/react';

const API_URL = 'https://react-dashboard.cubecloudapp.dev';
const CUBEJS_TOKEN =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.* eyJpYXQiOjE1OTE3MDcxNDgsImV4cCI6MTU5NDI5OTE0OH0.* n5jGLQJ14igg6_Hri_Autx9qOIzVqp4oYxmX27V-4T4';

const cubejsApi = cubejs(CUBEJS_TOKEN, {
  apiUrl: `${API_URL}/cubejs-api/v1`,
});

export default function App() {
  return (
    <CubeProvider cubejsApi={cubejsApi}>
      //...
    </CubeProvider>
  )
}

CubeContext: Context‹CubeContextProps

In case when you need access to cubejsApi directly you can use CubeContext anywhere in your app

import React from 'react';
import { CubeContext } from '@cubejs-client/react';

export default function DisplayComponent() {
  const { cubejsApi } = React.useContext(CubeContext);
  const [rawResults, setRawResults] = React.useState([]);
  const query = {
    ...
  };

  React.useEffect(() => {
    cubejsApi.load(query).then((resultSet) => {
      setRawResults(resultSet.rawData());
    });
  }, [query]);

  return (
    <>
      {rawResults.map(row => (
        ...
      ))}
    </>
  )
}

Ƭ ChartType: "line" | "bar" | "table" | "area"

NameType
cubejsApiCubejsApi

NameType
childrenReact.ReactNode
cubejsApiCubejsApi

You can use the following methods for member manipulaltion

<QueryBuilder
  // ...
  cubejsApi={cubejsApi}
  render={({
    // ...
    availableMeasures,
    updateMeasures,
  }) => {
    return (
      // ...
      <Select
        mode="multiple"
        placeholder="Please select"
        onSelect={(measure) => updateMeasures.add(measure)}
        onDeselect={(measure) => updateMeasures.remove(measure)}
      >
        {availableMeasures.map((measure) => (
          <Select.Option key={measure.name} value={measure}>
            {measure.title}
          </Select.Option>
        ))}
      </Select>
    );
  }}
/>

NOTE: if you need to add or remove more than one member at a time you should use updateQuery prop of QueryBuilderRenderProps

<QueryBuilder
  // ...
  cubejsApi={cubejsApi}
  render={({
    // ...
    measures,
    updateMeasures,
    updateQuery,
  }) => {
    // ...
    return (
      <>
        // WRONG: This code will not work properly
        <button
          onClick={() =>
            measures.forEach((measure) => updateMeasures.remove(measure))
          }
        >
          Remove all
        </button>

        // CORRECT: Using `updateQuery` for removing all measures
        <button
          onClick={() =>
            updateQuery({
              measures: [],
            })
          }
        >
          Remove all
        </button>
      </>
    );
  }}
/>
NameType
add(member: MemberType) => void
remove(member: MemberType) => void
update(member: MemberType, updateWith: MemberType) => void

NameType
isLoadingboolean

NameType
chartType?ChartType
pivotConfig?PivotConfig
shouldApplyHeuristicOrder?boolean