useFetch()

Busca um Endpoint se ele não estiver em cache ou estiver desatualizado. Retorna um Ref que contém a promise do fetch (com uma flag resolved). Um novo fetch é disparado quando os argumentos mudam ou os dados são invalidados. Use-o para iniciar fetches cedo e depois leia os dados com useSuspense(), useCache() ou useDLE().

Uso

Carregamento de dados em paralelo

await useSuspense() executa sequencialmente no <script setup>. Chamar useFetch() primeiro para cada endpoint inicia todos os fetches em paralelo; as chamadas de useSuspense() seguintes reutilizam então as requisições em andamento.

Resources

PostWithComments.vue

<script setup lang="ts">
  import { useFetch, useSuspense } from '@data-client/vue';
  import { PostResource, CommentResource } from './Resources';

  const props = defineProps<{ id: number }>();

  // Both fetches start in parallel
  useFetch(PostResource.get, () => ({ id: props.id }));
  useFetch(CommentResource.getList, () => ({ postId: props.id }));

  // useSuspense() reads the results — the second fetch
  // is already in-flight while the first one is awaited
  const post = await useSuspense(PostResource.get, () => ({ id: props.id }));
  const comments = await useSuspense(CommentResource.getList, () => ({
    postId: props.id,
  }));
</script>

<template>
  <article>
    <h3>{{ post.title }}</h3>
    <p>{{ post.body }}</p>
    <h4>Comments</h4>
    <div v-for="comment in comments" :key="comment.id" class="listItem">
      <strong>{{ comment.author }}</strong>: {{ comment.text }}
    </div>
  </article>
</template>

Prefetching

useFetch() também pode ser usado de forma independente para garantir que os recursos estejam disponíveis cedo na árvore de renderização, antes de serem necessários.

dica

Use em combinação com um hook de vinculação de dados (useCache(), useSuspense(), useDLE(), useLive()) em outro componente.

MasterPost.vue

<script setup lang="ts">
  import { useFetch } from '@data-client/vue';
  import { PostResource } from './Resources';

  const props = defineProps<{ id: number }>();
  useFetch(PostResource.get, () => ({ id: props.id }));
  // ...
</script>

Comportamento

Status de expiração	Fetch	.value	resolved	Condições
Inválido	sim1	promise pendente	false	não está na store, exclusão, invalidação
Desatualizado	sim1	promise pendente	false	(primeira renderização, mudança de args) & expiração < agora
Válido	não	promise resolvida	true	conclusão do fetch
Erro	não	promise rejeitada	true	fetch falhou
	não	undefined		null usado como segundo argumento

O Ref retornado é atualizado com uma nova promise sempre que um fetch é disparado: em mudança de argumentos, invalidação ou reset.

observação

1. Fetches idênticos são automaticamente deduplicados

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

Tipos

function useFetch(
  endpoint: ReadEndpoint,
  ...args: MaybeRefsOrGetters<Parameters<typeof endpoint>> | [null]
): Readonly<
  Ref<
    | (Promise<Denormalize<typeof endpoint.schema>> & {
        resolved: boolean;
      })
    | undefined
  >
>;

Os argumentos podem ser valores simples, refs (incluindo computed) ou funções getter como () => ({ id: props.id }). Um objeto simples como { id: props.id } é lido uma única vez e não acompanha mudanças de props ou de rota, então use um getter ou computed quando um argumento puder mudar.

Um novo fetch é disparado quando os argumentos mudam.

Exemplos

Verificando o status do fetch

Use promise.resolved para verificar se os dados ainda estão carregando:

MasterPost.vue

<script setup lang="ts">
  import { useFetch } from '@data-client/vue';
  import { PostResource } from './Resources';

  const props = defineProps<{ id: number }>();
  const promise = useFetch(PostResource.get, () => ({ id: props.id }));
  if (promise.value && !promise.value.resolved) {
    // fetch is in-flight
  }
  // ...
</script>