useSubscription()

Ótimo para manter recursos atualizados quando eles mudam com frequência.

Ao usar as assinaturas de polling padrão, a frequência deve ser definida no Endpoint; caso contrário, não terá nenhum efeito.

dica

useLive() é uma forma mais concisa de usar em combinação com 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>

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

A assinatura é criada quando o componente é configurado e removida quando ele é desmontado. Quando um argumento passado como ref muda, a assinatura anterior é removida e uma nova é criada para os novos argumentos.

Tipos

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

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.

Exemplos

Assinar apenas enquanto o elemento está visível

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>

Quando null é enviado como segundo argumento, a assinatura é desativada. Claro que, se outros componentes ainda estiverem inscritos, as atualizações dos dados continuarão ativas.

useElementVisibility(), do VueUse, usa o IntersectionObserver, que tem ótimo desempenho. Os template refs nos permitem acessar o DOM.