Saltar al contenido principal

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
import { useSuspense, useSubscription } from '@data-client/react';
import { getPrice } from 'api/Price';

function MasterPrice({ symbol }: { symbol: string }) {
  const price = useSuspense(getPrice, { symbol });
  useSubscription(getPrice, { symbol });
  // ...
}

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, id ? { id } : null);
React Native

Al usar React Navigation, useSubscription() se suscribirá o cancelará la suscripción cuando la pantalla gane o pierda el foco, respectivamente.

Tipos​

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

Ejemplos​

Suscribirse solo mientras el elemento es visible​

MasterPrice.tsx
import { useIntersectionObserver } from '@uidotdev/usehooks';
import { useSuspense, useSubscription } from '@data-client/react';
import { getPrice } from 'api/Price';

function MasterPrice({ symbol }: { symbol: string }) {
  const price = useSuspense(getPrice, { symbol });
  const [ref, entry] = useIntersectionObserver();
  // null params means don't subscribe
  useSubscription(getPrice, entry?.isIntersecting ? { symbol } : null);

  return <div ref={ref}>{price.price}</div>;
}

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.

useIntersectionObserver() usa IntersectionObserver, que es muy eficiente. ref nos permite acceder al DOM.

Precios de criptomonedas (websockets)​

Implementamos nuestro propio StreamManager para manejar nuestro protocolo de websocket personalizado. Aquí escuchamos las acciones subscribe/unsubscribe enviadas por useSubscription para asegurarnos de escuchar solo las actualizaciones de los componentes que se están renderizando.

Explora el ejemplo coin-app

Abrir en StackBlitzVer código fuente

More Demos