useCache()

Renderizado de datos sin el fetch.

Accede a la respuesta de cualquier Endpoint. Devuelve undefined hasta que se obtiene, se establece o se puede inferir a partir de las entities que ya están en el store, y de nuevo tras una invalidación (consulta Comportamiento). Eso significa "no cargado", no "no existe en el servidor", así que úsalo para datos que carga otro código, como el usuario actual que obtiene un flujo de inicio de sesión.

useCache() reacciona a las mutaciones de los datos y vuelve a renderizar solo cuando es necesario.

Uso

UserResource

Unauthed

Authorized

Entry

import { useCache } from '@data-client/react';
import { UserResource } from './UserResource';
import Unauthed from './Unauthed';
import Authorized from './Authorized';

function AuthorizedPage() {
  // currentUser as User | undefined
  const currentUser = useCache(UserResource.current);
  // user is not logged in
  if (!currentUser) return <Unauthed />;
  // currentUser as User (typeguarded)
  return <Authorized user={currentUser} />;
}
render(<AuthorizedPage />);

Vista previa en vivo

Consulta el estrechamiento por veracidad para más información sobre el manejo de tipos

Comportamiento

Estado de caducidad	Devuelve	Condiciones
Inválido	undefined	no está en el store, eliminación, invalidación, invalidIfStale
Obsoleto	desnormalizado	(primer render, cambio de argumentos) & caducidad < ahora
Válido	desnormalizado	finalización del fetch
	undefined	null usado como segundo argumento

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

Tipos

Tipo

function useCache(
  endpoint: ReadEndpoint,
  ...args: Parameters<typeof endpoint> | [null]
): Denormalize<typeof endpoint.schema> | null;

Con genéricos

function useCache<
  E extends Pick<
    EndpointInterface<FetchFunction, Schema | undefined, undefined>,
    'key' | 'schema' | 'invalidIfStale'
  >,
  Args extends readonly [...Parameters<E['key']>] | readonly [null],
>(endpoint: E, ...args: Args): DenormalizeNullable<E['schema']>;

Ejemplos

Inicio y cierre de sesión en la barra de navegación de Github

Nuestro usuario actual solo existe cuando estamos autenticados. Por lo tanto, podemos usar useCache(UserResource.current) para determinar si se muestran los botones de navegación de inicio o de cierre de sesión.

Explora el ejemplo github-app

Abrir en StackBlitzVer código fuente

Cargando la demo…

Más demos

Autorización de comentarios en Github

Aquí solo mostramos el formulario de comentarios si el usuario está autenticado.

Explora el ejemplo github-app

Abrir en StackBlitzVer código fuente

Cargando la demo…

Más demos