How to cancel an AJAX request?

[albertcito]

I have a component to upload an image. But If I remove the component the uploading should be cancel, but it continue uploading. I know that I could cancel the request returning the cancel function in useEffect but I don't see any cancel function from URQL. How can I do it with URQL?

Screen.Recording.2021-03-24.at.5.08.11.PM.mov

I have my foreach to print the images

{
  imagesToUpload.map((image) => (
    <UploadImage
      file={image.file}
      id={image.id}
      key={image.id}
      onRemove={(_, id) => setImagesToUpload((files) => removeByColumn(files, 'id', id))}
      onFail={(id) => setImagesToUpload((files) => removeByColumn(files, 'id', id))}
      onSuccess={(imageID) => setImageIDs((images) => [...images, imageID])}
      setStatus={setStatusImage}
    />
  ))
}

Inside of UploadImage is the URL call to the server const [{ fetching }, upload] = useMediaUploadMutation();

I need do something like.

useEffect(() => () => {
  cancelUpload();
  }, []);

[ngochoangdev-bunbu]

I am interested!

[kitten]

Just to add a response to this, it's not recommendable to have a GraphQL mutation that's cancellable and instead rely on a multistep solution.
The most common one here is to have a separate upload URL.

This has multiple reasons. The first is that GraphQL mutations aren't cancellable and in urql, they're hence also not cancellable.

While it's possible to make them cancellable and cancelling HTTP requests is normal, and does happen for subscriptions and queries, for mutations the situation is different.

Although there's nothing stopping you from cancelling mutations that run via HTTP there's no guarantee that the remote API will respond to this, mutation or not. There's basically no guarantee that a mutation, when cancelled, will not have altered any data on the server-side.

While this is a bit more complicated for multipart, and technically possible without violating the GraphQL spec, I'd still recommend separate upload URLs since it'll also allow for progress tracking and other features that are out-of-scope for Multipart Uploads via GraphQL in urql

cc @ngochoangdev-bunbu