後端连线资讯设定好,且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 实作滚动视差
在评估阶段有几件面向需要注意 资料产品品质 资料产品品质是需要持续监控和评估的。不同层的资料产品有不...
一样先来个简单的总结吧! 这份文件 Physical Memory Model 是在描述 Linux...
启航罗~~~ 此篇开始,会介绍AWS上使用完全托管的Kubernetes服务之EKS系列。一般自己托...
无论设备是LAN还是WAN,都需要在设备连接到网络之前进行身份验证。设备成功连接到网络後,才主要使用...
前情提要 在前面的例子里,我们使用Grid来展示学生资料 grid = grid { isExpan...