useCache()

Renderização de dados sem o fetch.

Acessa a resposta de qualquer Endpoint. Se a resposta não existir, retorna undefined. Isso pode ser usado para verificar a existência de um Endpoint's, como para autenticação.

useCache() reage às mutações de dados; renderizando novamente apenas quando necessário.

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▶

Veja truthiness narrowing para mais informações sobre o tratamento de tipos

Comportamento

Status de expiração	Retorna	Condições
Invalid	undefined	não está no store, exclusão, invalidação, invalidIfStale
Stale	desnormalizado	(primeira renderização, mudança de argumentos) & expiração < agora
Valid	desnormalizado	conclusão do fetch
	undefined	null usado como segundo argumento

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 = 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']>;

Exemplos

Login/logout na navbar do Github

O usuário atual só existe quando estamos autenticados. Assim, podemos usar useCache(UserResource.current) para determinar se devemos mostrar os botões de navegação de login ou de logout.

Explore o exemplo github-app

Abrir no StackBlitzVer código-fonte

Loading demo…

More Demos

Autorização de comentários no Github

Aqui só mostramos o formulário de comentário se o usuário estiver autenticado.

Explore o exemplo github-app

Abrir no StackBlitzVer código-fonte

Loading demo…

More Demos