Connect any data source, combine them in real-time and instantly get low-latency gRPC and REST APIs.
⚡ All with just a simple configuration! ⚡️
This repository is a react helpers for using Dozer as data provider.
It contains 3 hooks useCount, useQueryCommon, useOnEvent
yarn add @dozerjs/dozer-reactThis hook returns number of records in endpoint.
import { useCount } from "@dozerjs/dozer-react";
// ...
const AirportComponent = () => {
const [count] = useCount('airports');
return <span>Total airports count: {count}</span>
}This hook can be used for getting data from cache. It allows to pass query. Query is json object serialized as string.
import { useQueryCommon } from "@dozerjs/dozer-react";
// ...
const AirportComponent = () => {
let query = {
orderBy: {
start: Order.ASC
}
}
const [records, fields] = useQueryCommon('airports', query);
return <>{records.map(r => <div>{ r.name }</div>)}</>
}UseOnEvent hook can be used for getting data updates from dozer. It uses callback to pass operations. Callback has 4 arguments:
data- Operation event. Reference to structure can be found herefields- Fields array, which are used for mapping operation data.primaryIndexKeys- Array of primary key fields indexesmapper- Mapper instance, which can be used for converting data.
const AirportsComponent = () => {
const [airports, setAirports] = useState([]);
useOnEvent('airports', (data, fields, primaryIndexKeys, mapper) => {
if (fields.length) {
setAirports(records => {
if (data.getTyp() === OperationType.UPDATE) {
let oldValue = mapper.mapRecord(data.getOld().getValuesList());
let existingIndex = records.findIndex(v => primaryIndexKeys.every(index => v[index] === oldValue[index]));
if (records.length > 0) {
if (existingIndex > -1) {
records[existingIndex] = mapper.mapRecord(data.getNew().getValuesList());
return [...records];
} else {
return [...records, mapper.mapRecord(data.getNew().getValuesList())];
}
}
} else if (data.getTyp() === OperationType.INSERT) {
return [...records, mapper.mapRecord(data.getNew().getValuesList())];
}
return records
});
}
});
return <>{airports.map(airport => <div>{ airport.name }</div>)}</>
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent