Saltar al contenido principal

useLive()

Renderizado asíncrono de mutaciones de datos activadas de forma remota.

useSuspense() + useSubscription() en un solo composable.

useLive() reacciona a las mutaciones de datos; vuelve a renderizar solo cuando es necesario.

Uso​

<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>

Al igual que useSuspense(), useLive() devuelve una Promise, por lo que se usa con await en <script setup> y requiere un ancestro Suspense. La suscripción se elimina automáticamente cuando el componente se desmonta.

Comportamiento​

Dependencias condicionales

Usar null como segundo argumento de cualquier hook de Data Client significa "no hacer 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>>>>;

Los argumentos pueden ser valores simples, refs (incluidos los computed) o funciones getter como () => ({ id: props.id }). Un objeto simple como { id: props.id } se lee una sola vez y no seguirá los cambios de props ni de ruta, así que usa un getter o computed cuando un argumento pueda cambiar.

El resultado se actualiza (y la suscripción se restablece) cuando cambian los argumentos. Mientras se cargan los datos de los nuevos argumentos, el resultado conserva los datos anteriores en lugar de volverse undefined. Si esa petición falla, leer el resultado lanza el error (según su política de errores), por lo que llega a onErrorCaptured().

Ejemplos​

Precio de Bitcoin (sondeo)​

Cuando se renderiza nuestro componente con useLive, getTicker obtendrá los datos cada pollFrequency milisegundos.