後端連線資訊設定好，且CUBE也設定好後，就可以繼續處理前端的連線。

首先需要在前端安裝兩個套件

# npm
$ npm install --save @cubejs-client/core @cubejs-client/react

接下來是通過將“WebSocketTransport”傳遞給 CubejsApi 構造函數來切換到 Web Sockets：

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/',
  }),
});

當然我們也可以用原生的API方式去取連線

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
    }
  }
);

甚至也可以使用REAT Hook的方式處理

mport { 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} />;
};

設定完成後，我們就可以透過以下方式，去取得query出來的DATA。

import { ResultSet } from '@cubejs-client/core';