useCancelling()

Cria um Endpoint que cancela o fetch sempre que os parâmetros mudam

Aborta a requisição em andamento se os parâmetros mudarem.

Uso

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▶

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 isto com muitos componentes independentes buscando os mesmos argumentos (par Endpoint/params) com useSuspense(). Esta solução aborta os fetches por componente, o que significa que você pode acabar cancelando um fetch com o qual outro componente ainda se importa.

Tipos

function useCancelling<
  E extends EndpointInterface & {
    extend: (o: { signal?: AbortSignal }) => any;
  },
>(endpoint: E, ...args: readonly [...Parameters<E>] | readonly [null]): E {