@cubejs-client/react

import React from 'react';
import { Table } from 'antd';
import { useCubeQuery }  from '@cubejs-client/react';
 
export default function App() {
  const { resultSet, isLoading, error, progress } = useCubeQuery({
    measures: ['Orders.count'],
    dimensions: ['Orders.createdAt.month'],
  });
 
  if (isLoading) {
    return <div>{progress && progress.stage && progress.stage.stage || '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} />;
}
 

import React from 'react';
import ReactDOM from 'react-dom';
import { Layout, Divider, Empty, Select } from 'antd';
import { QueryBuilder } from '@cubejs-client/react';
import cube from '@cubejs-client/core';
import 'antd/dist/antd.css';
 
import ChartRenderer from './ChartRenderer';
 
const cubeApi = cube('YOUR-CUBE-API-TOKEN', {
  apiUrl: 'http://localhost:4000/cubejs-api/v1',
});
 
const App = () => (
  <QueryBuilder
    query={{
      timeDimensions: [
        {
          dimension: 'LineItems.createdAt',
          granularity: 'month',
        },
      ],
    }}
    cubeApi={cubeApi}
    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);

import React from 'react';
import cube from '@cubejs-client/core';
import { CubeProvider } from '@cubejs-client/react';
 
const API_URL = 'https://harsh-eel.aws-us-east-2.cubecloudapp.dev';
const CUBE_TOKEN =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.* eyJpYXQiOjE1OTE3MDcxNDgsImV4cCI6MTU5NDI5OTE0OH0.* n5jGLQJ14igg6_Hri_Autx9qOIzVqp4oYxmX27V-4T4';
 
const cubeApi = cube(CUBE_TOKEN, {
  apiUrl: `${API_URL}/cubejs-api/v1`,
});
 
export default function App() {
  return (
    <CubeProvider cubeApi={cubeApi}>
      //...
    </CubeProvider>
  )
}

import React from 'react';
import { CubeContext } from '@cubejs-client/react';
 
export default function DisplayComponent() {
  const { cubeApi } = React.useContext(CubeContext);
  const [rawResults, setRawResults] = React.useState([]);
  const query = {
    ...
  };
 
  React.useEffect(() => {
    cubeApi.load(query).then((resultSet) => {
      setRawResults(resultSet.rawData());
    });
  }, [query]);
 
  return (
    <>
      {rawResults.map(row => (
        ...
      ))}
    </>
  )
}

<QueryBuilder
  // ...
  cubeApi={cubeApi}
  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>
    );
  }}
/>

<QueryBuilder
  // ...
  cubeApi={cubeApi}
  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>
      </>
    );
  }}
/>