How to properly catch a canceled request using Apollo Client library

13 views Asked by At

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?

0

There are 0 answers