useLive()

Renderização assíncrona de mutações de dados disparadas remotamente.

useSuspense() + useSubscription() em um único composable.

useLive() reage às mutações de dados, rerrenderizando apenas quando necessário.

Uso

Ticker

AssetPrice.vue

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

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

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

Assim como useSuspense(), useLive() retorna uma Promise, então é usado com await em <script setup> e exige um ancestral Suspense. A subscription é removida automaticamente quando o componente é desmontado.

Comportamento

Dependências condicionais

Usar null como segundo argumento de qualquer hook do Data Client significa "não fazer nada."

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

Tipos

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

Os argumentos podem ser valores simples, refs (incluindo computed) ou funções getter como () => ({ id: props.id }). Um objeto simples como { id: props.id } é lido uma única vez e não acompanha mudanças de props ou de rota, então use um getter ou computed quando um argumento puder mudar.

O resultado é atualizado (e a subscription é restabelecida) quando os argumentos mudam. Enquanto os dados para os novos argumentos carregam, o resultado mantém os dados anteriores em vez de se tornar undefined. Se esse fetch falhar, a leitura do resultado lança o erro (conforme sua política de erros), que chega então a onErrorCaptured().

Exemplos

Preço do Bitcoin (polling)

Quando nosso componente com useLive é renderizado, getTicker fará fetch a cada pollFrequency milissegundos.