Tracking upload progress with RTK Query

[zcuric]

Hi, is there an efficient way of tracking upload progress with RTK Query, like for example onUploadProgress similiar what axios does? Or is the best way just to write custom baseQuery with with xhr or with axios?

Thanks.

[phryneas]

Writing such a baseQuery wouldn't really help you, as RTK Query itself only tracks start and end, no progress.

My recommendation would be to handle such an upload independently from RTK Query - or maybe in a queryFn. There you won't be able to use fetch, as fetch unfortunately does not track progress - you'd have to use axios or one manual XHRRequest.

[zcuric]

@phryneas Thank you.

[uwemneku]

@phryneas Thanks for the works you guys put into this amazing library.
I'm currenlty monitoring upload progress by passing a call back function to a mutation. Please is this an anti-pattern ?

type CallbackFunc = (
  progress: Record<string, { progress?: number; url?: string }>
) => void;


 createProduct: build.mutation<
        unknown,
        {
          product: IProduct;
          onImageUploadProgress: CallbackFunc;
        }
      >({
        async queryFn(arg) {
          const { images, ...products } = arg.product;
          await uploadImage( images, arg.onImageUploadProgress);
          await setDoc(productsDocRef, products);
          return { data: {} };
        },
        invalidatesTags: ["products"],
      })