Skip to main content

useLive()

Async rendering of remotely triggered data mutations.

useSuspense() + useSubscription() in one composable.

useLive() is reactive to data mutations; rerendering only when necessary.

Usage​

<script setup lang="ts">
  import { computed } from 'vue';
  import { useLive } from '@data-client/vue';
  import { getTicker } from './Ticker';

  const props = defineProps<{ productId: string }>();
  // highlight-next-line
  const ticker = await useLive(getTicker, computed(() => ({
    productId: props.productId,
  })));
</script>

<template>
  <center>
    {{ productId }}
    <NumberFlow
      :value="ticker.price"
      :format="{ style: 'currency', currency: 'USD' }"
    />
  </center>
</template>

Like useSuspense(), useLive() returns a Promise, so it is used with await in <script setup> and requires a Suspense ancestor. The subscription is removed automatically when the component unmounts.

Behavior​

Conditional Dependencies

Use null as the second argument to any Data Client hook means "do nothing."

// todo could be undefined if id is undefined
const todo = useLive(
  TodoResource.get,
  computed(() => (id.value ? { id: id.value } : null)),
);

:::

Types​

function useLive(
  endpoint: ReadEndpoint,
  ...args: MaybeRefsOrGetters<Parameters<typeof endpoint>> | [null]
): Promise<DeepReadonly<ComputedRef<Denormalize<typeof endpoint.schema>>>>;

Arguments can be plain values or refs (including computed); the result updates (and the subscription is re-established) when they change.

Examples​

Bitcoin Price (polling)​

When our component with useLive is rendered, getTicker will fetch at pollFrequency miliseconds.