iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
自我挑戰組

轉職未滿一年的點點滴滴系列 第 28

[Day 28] - 『轉職工作的Lessons learned』 - Cube.js(IV)

後端連線資訊設定好,且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';

上一篇
[Day 27] - 『轉職工作的Lessons learned』 - Cube.js(III)
下一篇
[Day 29] -『 GO語言學習筆記』- 複合型別 - 切片(Slice) (I)
系列文
轉職未滿一年的點點滴滴30

尚未有邦友留言

立即登入留言