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"], })

[jabedzaman]

how are you managing to get the progess, in sense access it... can you please provide an elaborated example 🙃 would be really helpful... and btw will this effect my authentication... cause my base query was having the access token and incase it gets expired (i.e. 401) how to handle refectching new tokens and continuing the upload??

[mlarabi]

@uwemneku Nice approach.

[hamzeloudev]

A utility package for integrating file upload/download with progress tracking into your Redux Toolkit Query API slices:

rtk-upload-utils

[markerikson]

@hamzeloudev fyi your published package is pretty badly broken. It lists RTK, TS, and React-Redux as dependencies, which is wrong. They need to be either peerDependencies or devDependencies.