Real-Time Data Fetch

Most of databases supported by Cube.js are retroactive. It means Cube.js should continuously poll for changes rather than receive updates as subscribed listener. Cube.js provides convenient way to create such polling database subscriptions on your behalf.

To provide best real-time experience it's recommended to use Web Sockets transport instead of default http long polling. Web sockets on backend can be enabled using CUBEJS_WEB_SOCKETS environment variable:

.env:

CUBEJS_WEB_SOCKETS=true

Clients can be switched to Web Sockets by passing WebSocketTransport to CubejsApi constructor:

import cubejs from '@cubejs-client/core';
import WebSocketTransport from '@cubejs-client/ws-transport';

const cubejsApi = cubejs({
  transport: new WebSocketTransport({
    authorization: CUBEJS_TOKEN,
    apiUrl: 'ws://localhost:4000/',
  }),
});

Multiple APIs are provided to support data subscription scenarios.

import cubejs from '@cubejs-client/core';
import WebSocketTransport from '@cubejs-client/ws-transport';

const cubejsApi = cubejs({
  transport: new WebSocketTransport({
    authorization: CUBEJS_TOKEN,
    apiUrl: 'ws://localhost:4000/',
  }),
});

cubejsApi.subscribe(
  {
    measures: ['Logs.count'],
    timeDimensions: [
      {
        dimension: 'Logs.time',
        granularity: 'hour',
        dateRange: 'last 1440 minutes',
      },
    ],
  },
  options,
  (error, resultSet) => {
    if (!error) {
      // handle the update
    }
  }
);

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

const Chart = ({ query }) => {
  const { resultSet, error, isLoading } = useCubeQuery(query, {
    subscribe: true,
  });

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

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

  if (!resultSet) {
    return null;
  }

  return <LineChart resultSet={resultSet} />;
};

As in the case of a regular data fetch, real-time data fetch obeys refreshKey refresh rules. In order to provide desired refresh rate refreshKey should reflect changes of the underlying data set as well it's querying time should be much less than the desired refresh rate. Please use the refreshKey every parameter to adjust refresh interval.

Did you find this page useful?