useSubscription()

Ideal para mantener actualizados los recursos que cambian con frecuencia.

Al usar las suscripciones de sondeo por defecto, la frecuencia debe establecerse en Endpoint; de lo contrario, no tendrá ningún efecto.

consejo

useLive() es una forma más concisa de usarlo en combinación con useSuspense(),

Uso

api/Price

import { RestEndpoint, Entity } from '@data-client/rest';

export class Price extends Entity {
  symbol = '';
  price = '0.0';
  // ...

  pk() {
    return this.symbol;
  }
}

export const getPrice = new RestEndpoint({
  urlPrefix: 'http://test.com',
  path: '/price/:symbol',
  schema: Price,
  pollFrequency: 5000,
});

MasterPrice.vue

<script setup lang="ts">
  import { useSuspense, useSubscription } from '@data-client/vue';
  import { getPrice } from 'api/Price';

  const props = defineProps<{ symbol: string }>();
  const price = await useSuspense(getPrice, () => ({ symbol: props.symbol }));
  useSubscription(getPrice, () => ({ symbol: props.symbol }));
  // ...
</script>

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 = useSubscription(
  TodoResource.get,
  computed(() => (id.value ? { id: id.value } : null)),
);

La suscripción se crea cuando se configura el componente y se elimina cuando se desmonta. Cuando cambia un argumento pasado como ref, la suscripción anterior se elimina y se crea una nueva para los nuevos argumentos.

Tipos

function useSubscription(
  endpoint: ReadEndpoint,
  ...args: MaybeRefsOrGetters<Parameters<typeof endpoint>> | [null]
): void;

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.

Ejemplos

Suscribirse solo mientras el elemento es visible

MasterPrice.vue

<script setup lang="ts">
  import { computed, useTemplateRef } from 'vue';
  import { useElementVisibility } from '@vueuse/core';
  import { useSuspense, useSubscription } from '@data-client/vue';
  import { getPrice } from 'api/Price';

  const props = defineProps<{ symbol: string }>();
  const price = await useSuspense(getPrice, () => ({ symbol: props.symbol }));
  const el = useTemplateRef('el');
  const isVisible = useElementVisibility(el);
  // null params means don't subscribe
  useSubscription(
    getPrice,
    computed(() => (isVisible.value ? { symbol: props.symbol } : null)),
  );
</script>

<template>
  <div ref="el">{{ price.price }}</div>
</template>

Cuando se envía null como segundo argumento, la suscripción se desactiva. Por supuesto, si otros componentes siguen suscritos, las actualizaciones de datos seguirán activas.

useElementVisibility() de VueUse usa IntersectionObserver, que es muy eficiente. Las Template refs nos permiten acceder al DOM.