I implemented a 'cancel query' feature, in my react app, when submitting a graphql request with apollo client while one is still running:
const [searchQuery] = useLazyQuery<QueryResponse>(GET_QUERY_WITH_FACETS, {
notifyOnNetworkStatusChange: true,
onError: (err) => {
if (err.message !== ABORTED_ERROR) {
messageStore.addMessage('Error', err.message, 'error');
setLoading(false);
}
},
context: {
fetchOptions: {
signal: aborterRef.signal,
},
},
});
...
const fetchResults = async () => {
aborterRef.abort();
setAbortRef(new AbortController());
searchQuery();
}
Where ABORTED_ERROR = 'The operation was aborted..
The if on the error side is because the aborted error is not really an error, since I'm purposefully doing it, and I don't want to show it to the user or break the page for it
The message however is different for each browser, for example:
- firefox: The operation was aborted.
- chrome: The user aborted a request etc.
I guess since the message is not uniformed for each browser maybe this is not the best way to go. Is there a way to understand that it's a controlled abort? Or is there another way I can avoid finishing my first query if the user submits a second one?