Abort request
query.abort is a method for aborting a fetch (opens in a new tab) request with the AbortController (opens in a new tab) API.
Usage
Setup signal in client
In your createClient invocation, add the property to your fetch call signal:
client/tsdl.ts
export const tsdl = createClient<Router>(({ url, signal }) =>
fetch(url("http://localhost:8000/tsdl"), { signal }).then((d) => d.json())
);Together with options you would use this instead:
client/tsdl.ts
export const tsdl = createClient<Router>(({ url, options, signal }) =>
fetch(url("http://localhost:8000/tsdl"), { ...options, signal }).then((d) =>
d.json()
)
);Perform request abortion
Simply invoke .abort on any route
App.tsx
import { tsdl } from "@/tsdl";
import { useState, useEffect } from "react";
export function Search() {
const [value, setValue] = useState("");
const search = tsdl.animals.search.useMutation();
useEffect(() => {
search.mutate(value);
return () => tsdl.animals.search.abort();
}, [value]);
return (
<>
<input value={value} setValue={setValue} />
<p>Search Results:</p>
<ul>
{search.data?.map(animal =>
<li key={animal.id}>{animal.name}</li>
)}
</ul>
</ul>
)
}Calling .abort() on a route without its client providing a signal is a no-op