Saltar al contenido principal

useController()

Controller ofrece métodos con tipado seguro para acceder al store y despachar acciones.

Por ejemplo, fetch, invalidate y setResponse

import { useCallback } from 'react';
import { useController } from '@data-client/react';
import { MyResource } from './resources';

function MyComponent({ id }: { id: string }) {
  const ctrl = useController();

  const handleRefresh = useCallback(
    async e => {
      await ctrl.fetch(MyResource.get, { id });
    },
    [ctrl, id],
  );

  const handleSuspend = useCallback(
    async e => {
      await ctrl.invalidate(MyResource.get, { id });
    },
    [ctrl, id],
  );

  const handleLogout = useCallback(
    async e => {
      ctrl.resetEntireStore();
    },
    [ctrl],
  );
}

Ejemplos​

Envío de formularios​

fetch devuelve la respuesta desnormalizada, igual que el tipo de retorno de useSuspense(). Esto permite usar métodos de Entity como pk().

import type { FormEvent } from 'react';
import { useNavigate } from 'react-router';
import { useController } from '@data-client/react';
import { PostResource } from './PostResource';

function CreatePost() {
  const ctrl = useController();
  const navigate = useNavigate();

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const post = await ctrl.fetch(
      PostResource.getList.push,
      new FormData(e.target as HTMLFormElement),
    );
    post.title;
    post.computedField;
    navigate(`/post/${post.pk()}`);
  };

  return <form onSubmit={handleSubmit}>{/* fields */}</form>;
}

Actualización directa de una entidad​

Usa set para actualizaciones inmediatas sin peticiones de red. Admite actualizaciones funcionales para evitar condiciones de carrera.

import { useController } from '@data-client/react';
import { Article } from './Article';

function VoteButton({ articleId }: { articleId: string }) {
  const ctrl = useController();

  return (
    <button
      onClick={() =>
        ctrl.set(Article, { id: articleId }, article => ({
          ...article,
          votes: article.votes + 1,
        }))
      }
    >
      Vote
    </button>
  );
}

Invalidar después de una mutación​

Fuerza la obtención de nuevo de los datos relacionados con invalidate o expireAll.

import { useController } from '@data-client/react';
import { UserResource } from './UserResource';

function ClearUserCache({ userId }: { userId: string }) {
  const ctrl = useController();

  const handleClear = async () => {
    // invalidate() causes suspense; expireAll() refetches silently
    ctrl.expireAll(UserResource.get);
    ctrl.expireAll(UserResource.getList);
  };

  return <button onClick={handleClear}>Refresh user data</button>;
}
consejo

Para un mejor rendimiento y consistencia, es preferible incluir las actualizaciones de efectos secundarios en las respuestas de las mutaciones.

Precarga​

Usa fetchIfStale para precargar sin volver a obtener datos que ya están frescos.

import { Link } from 'react-router';
import { useController } from '@data-client/react';
import { ArticleResource } from './ArticleResource';

function ArticleLink({ id }: { id: string }) {
  const ctrl = useController();

  return (
    <Link
      to={`/article/${id}`}
      onMouseEnter={() => ctrl.fetchIfStale(ArticleResource.get, { id })}
    >
      Read more
    </Link>
  );
}

Actualizaciones por websocket​

Rellena la caché con datos externos mediante set.

import { useEffect } from 'react';
import { useController } from '@data-client/react';
import { EntityMap } from './resources';

function useWebsocket(url: string) {
  const ctrl = useController();

  useEffect(() => {
    const ws = new WebSocket(url);
    ws.onmessage = event => {
      const { entity, args, data } = JSON.parse(event.data);
      ctrl.set(EntityMap[entity], args, data);
    };
    return () => ws.close();
  }, [ctrl, url]);
}
aviso

Para uso en producción, implementa un Manager para flujos de datos en lugar de efectos a nivel de componente. Los Managers manejan el ciclo de vida de la conexión de forma global y funcionan con SSR.

Aplicación de tareas​

Explora el ejemplo todo-app

Abrir en StackBlitzVer código fuente

More Demos