useCache()

Renderizado de datos sin el fetch.

Accede a la respuesta de cualquier Endpoint. Si la respuesta no existe, devuelve undefined. Esto puede usarse para comprobar la existencia de un Endpoint's, por ejemplo para la autenticació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 />);

Resultado

Store▶

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

Type

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

With Generics

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

Loading demo…

More 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

Loading demo…

More Demos