Cancelar un fetch

AbortController ofrece una nueva forma de cancelar las peticiones que dejan de ser relevantes. Se puede conectar al fetch mediante el segundo parámetro RequestInit.

Cancelar al cambiar los parámetros

A veces el usuario puede rellenar un campo que afecta a los resultados de una llamada de red. Si es un campo de texto, podría escribir muy rápido y generar muchas peticiones de red.

Usar useCancelling() cancelará automáticamente las peticiones en curso si los parámetros cambian antes de que la petición se resuelva.

resources/Todo

TodoDetail

Demo

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▶

Prueba a hacer clic en » muy rápido. Si incrementas antes de que se resuelva la petición, esta se cancelará y no deberías ver resultados en el store.

Advertencia

Ten cuidado al usar esto con muchos componentes independientes que obtienen los mismos argumentos (par Endpoint/params) con useSuspense(). Esta solución cancela los fetch por componente, lo que significa que podrías cancelar un fetch que otro componente todavía necesita.