@dozerjs/dozer-vue v0.0.6

Overview

This repository is a vue helpers for using Dozer as data provider.

Installation

# npm
npm install @dozerjs/dozer-vue
# yarn
yarn add @dozerjs/dozer-vue
# pnpm
pnpm add @dozerjs/dozer-vue

Usage

Provider

<script setup lang="ts">
import { DozerProvider } from "@dozerjs/dozer-vue";
</script>

<template>
  <DozerProvider :value="{
      serverAddress: 'http://localhost:50051',
  }">
    <!-- content -->
  </DozerProvider>
</template>

query

useDozerQuery(endpoint: string, query?: DozerQuery)

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

<script setup lang="ts">
import { useDozerQuery } from "@dozerjs/dozer-vue";
const { fields, records } = useDozerQuery('airports');
</script>

<template>
  <div v-for="record of records" :key="record.__dozer_record_id">{{JSON.stringify(record)}}</div>
</template>

count

useDozerCount(endpoint: string, query?: DozerQuery)

This hook returns number of records in endpoint.

<script setup lang="ts">
import { useDozerCount } from "@dozerjs/dozer-vue";
const { count } = useDozerCount('airports');
</script>

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

event

useDozerEvent(options: DozerOnEventOption[])

This hook can create a gRPC stream to monitor real-time store modifications for multiple endpoints.

<script setup lang="ts">
import { types_pb } from '@dozerjs/dozer';
import { useDozerEvent } from "@dozerjs/dozer-vue";
import { ref } from 'vue';

const count = ref(0);

const { stream } = useDozerEvent([
  {
    endpoint: 'airports',
    eventType: types_pb.EventType.All,
  }
]);

stream.on('data', (operation: types_pb.Operation) => {
  count.value += 1;
})
</script>

<template>
  <span>Total event count: {count}</span>
</template>

Advantage

connect stream

Here a connect function exported from useDozerQuery and useDozerCount, it can monitor gRPC stream exported from useDozerEvent and automagically updates.

<script setup lang="ts">
import { types_pb } from '@dozerjs/dozer';
import { useDozerCount, useDozerEvent, useDozerQuery } from "@dozerjs/dozer-vue";

const { stream } = useDozerEvent([
  {
    endpoint: 'airports',
    eventType: types_pb.EventType.ALL
  },
]);
const { count, connect: countConnect } = useDozerCount('airports');
const { records, connect: queryConnect } = useDozerQuery('airports');
countConnect(stream);
queryConnect(stream);
</script>

<template>
  <h3>Total count: <small>* automagic updates</small></h3>
  <div>{count}</div>
  <h3>Records length:  <small>* automagic updates</small></h3>
  <div v-for="record of records" :key="record.__dozer_record_id">{{JSON.stringify(record)}}</div>
</template>

consume operation

The connect function will consume all the operations of gRPC stream, if you want to filter, you can use consume funtion.

<script setup lang="ts">
import { types_pb } from '@dozerjs/dozer';
import { useDozerCount, useDozerEvent, useDozerQuery } from "@dozerjs/dozer-vue";

const { stream } = useDozerEvent([
  {
    endpoint: 'airports',
    eventType: types_pb.EventType.ALL
  },
]);
const { count, consume: countConsume } = useDozerCount('airports');
const { records, consume: queryConsume } = useDozerQuery('airports');
stream.on('data', (operation: types_pb.Operation) => {
  countConsume(operation);
  queryConsume(operation);
});
</script>

<template>
  <h3>Total count: <small>* automagic updates</small></h3>
  <div>{count}</div>
  <h3>Records length:  <small>* automagic updates</small></h3>
  <div v-for="record of records" :key="record.__dozer_record_id">{{JSON.stringify(record)}}</div>
</template>

multiple endpoints with event

useDozerEndpoints(options: DozerOnEventOption[])

This hook can get data for multiple endpoints. Can also automagic updates if you set eventType.

<script setup lang="ts">
import { types_pb } from '@dozerjs/dozer';
import { useDozerEndpoints } from "@dozerjs/dozer-vue";

const options = [
  {
    endpoint: 'airports',
    eventType: types_pb.EventType.ALL
  },
  {
    endpoint: 'airports_count',
    eventType: types_pb.EventType.All,
  },
];
const data = useDozerEndpoints(options);
</script>

<template>
  <div v-for="(option, index) in options">
    <h3>{{ option.endpoint }}</h3>
    <div v-if="data[index]">
      <div v-for="record of records" :key="record.__dozer_record_id">{{JSON.stringify(record)}}</div>
    </div>
  </div>
</template>