Pular para o conteúdo principal

Abortando fetch

O AbortController oferece uma nova maneira de cancelar fetches que deixaram de ser relevantes. Ele pode ser conectado ao fetch por meio do segundo parâmetro, RequestInit.

Cancelando ao mudar os parâmetros​

Às vezes o usuário pode preencher um campo que afeta os resultados de uma chamada de rede. Se for um campo de texto, ele pode digitar muito rápido, gerando um grande número de requisições de rede.

Usar useCancelling() cancela automaticamente as requisições em andamento se os parâmetros mudarem antes que a requisição seja resolvida.

import { useSuspense, useCancelling } from '@data-client/react';
import { TodoResource } from './resources/Todo';

export default function TodoDetail({ id }: { id: number }) {
  const todo = useSuspense(useCancelling(TodoResource.get, { id }), {
    id,
  });
  return <div>{todo.title}</div>;
}
Resultado
Store▶

Tente clicar em » bem rápido. Se você incrementar antes que a requisição seja resolvida, ela será cancelada e você não deverá ver resultados no store.

Aviso

Tenha cuidado ao usar isso com muitos componentes independentes que buscam os mesmos argumentos (par Endpoint/params) em useSuspense(). Esta solução aborta fetches por componente, o que significa que você pode acabar cancelando um fetch que outro componente ainda precisa.