[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';

<<:  30天打造品牌特色电商网站 Day.27 实作滚动视差

>>:  Day 27 - Greedy

[Day 25] 资料产品在评估阶段的五个大坑

在评估阶段有几件面向需要注意 资料产品品质 资料产品品质是需要持续监控和评估的。不同层的资料产品有不...

# Day 19 Physical Memory Model (Summary)

一样先来个简单的总结吧! 这份文件 Physical Memory Model 是在描述 Linux...

成为我们的夥伴,一起航向伟大的航道吧

启航罗~~~ 此篇开始,会介绍AWS上使用完全托管的Kubernetes服务之EKS系列。一般自己托...

网络访问控制(network access control)

无论设备是LAN还是WAN,都需要在设备连接到网络之前进行身份验证。设备成功连接到网络後,才主要使用...

VoK Grid 各种资料型态过滤器 - day15

前情提要 在前面的例子里,我们使用Grid来展示学生资料 grid = grid { isExpan...