Connect any data source, combine them in real-time and instantly get low-latency gRPC and REST APIs.
⚡ All with just a simple configuration! ⚡️

Overview

This repository is a react helpers for using Dozer as data provider. It contains 3 hooks useDozerEndpointCount, useDozerEndpointQuery, useDozerEndpoint

Installation

yarn add @dozerjs/dozer-react

Usage

Provider

import { DozerProvider } from "@dozerjs/dozer-react";

function App () {
    return (
        <DozerProvider value={{
            serverAddress: 'http://localhost:50051',
        }}>
            {/* ... */}
        </DozerProvider>
    )
}

useDozerEndpointCount(endpoint: string, options?: { query?: DozerQuery; watch?: EventType; })

This hook returns number of records in endpoint.

import { EventType } from '@dozerjs/dozer/lib/esm/generated/protos/types_pb';
import { useDozerEndpointCount } from "@dozerjs/dozer-react";
// ...

const AirportComponent = () => {
    // count will be updated on any change in airports endpoint
    // if you don't want to watch for changes, you can remove watch option
    const { count } = useDozerEndpointCount('airports', { watch: EventType.ALL });

    return <span>Total airports count: {count}</span>
}

useDozerEndpointQuery(endpoint: string, options?: { query?: DozerQuery; watch?: EventType; })

This hook can be used for getting data from cache. It allows to pass query. Query is json object serialized as string.

import { Order } from '@dozerjs/dozer';
import { EventType } from '@dozerjs/dozer/lib/esm/generated/protos/types_pb';
import { useDozerEndpointQuery } from "@dozerjs/dozer-react";
// ...

const AirportComponent = () => {
    let query = {
      orderBy: {
        start: Order.ASC
      }
    }
    // records will be updated on any change in airports endpoint
    // if you don't want to watch for changes, you can remove watch option
    const { records, fields } = useDozerEndpointQuery('airports', { query, watch: EventType.ALL });
    
    return <>{records.map(r => <div>{ r.name }</div>)}</>
}

useDozerEndpoint(endpoint: string, options?: { query?: DozerQuery; watch?: EventType; })

import { EventType } from '@dozerjs/dozer/lib/esm/generated/protos/types_pb';
import { useDozerEndpointQuery } from "@dozerjs/dozer-react";

const AirportsComponent = () => {
    // count and records will be updated on any change in airports endpoint
    // if you don't want to watch for changes, you can remove watch option
    const { count, records, fields } = useDozerEndpoint('airports', { watch: EventType.ALL });
    
    return <>
        <div>Count: {count}</div>
        {airports.map((airport, idx) => <div key={idx}>{ airport.name }</div>)}
    </>
}