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.vue

Authorized.vue

AuthorizedPage.vue

<script setup lang="ts">
  import { useCache } from '@data-client/vue';
  import { UserResource } from './UserResource';
  import Unauthed from './Unauthed.vue';
  import Authorized from './Authorized.vue';

  // currentUser as ComputedRef<User | undefined>
  const currentUser = useCache(UserResource.current);
</script>

<template>
  <!-- currentUser is unwrapped in the template -->
  <Authorized v-if="currentUser" :user="currentUser" />
  <!-- user is not logged in -->
  <Unauthed v-else />
</template>

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

Comportamiento

useCache() devuelve un ComputedRef. La tabla de abajo describe su .value.

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

Tipos

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

Los argumentos pueden ser valores simples, refs (incluidos los computed) o funciones getter como () => ({ id: props.id }). Un objeto simple como { id: props.id } se lee una sola vez y no seguirá los cambios de props ni de ruta, así que usa un getter o computed cuando un argumento pueda cambiar.

El resultado se actualiza cuando cambian los argumentos.