Upload progress for files

[VictorPulzz]

Hello guys! Will be cool add progress for uploading files. Like onUploadProgress in axois, but not using axios:)

[phryneas]

Unfortunately, using fetch that is pretty much impossible - you have to use XhrRequest or a library wrapping that (like axios) for that. That said, even if we would support that so far, the base concept of RTK Query is still "something started" -> "something finished".

I'd recommend doing file uploads in a mutation with a queryFn where you manually create an XhrRequest and tracking the file upload itself by dispatching actions during that to track the upload progress in a separate slice.

[VictorPulzz]

Okay, thanks!

[0xr0man]

why not to use fetch? it's also have a possibility to track upload progress

[phryneas]

@romaelberg by now, it's theoretically possible in newer chrome versions but only http2, and I'm not sure if other browsers even support it yet. This is one of those things that are probably still too early.

[0xr0man]

got it, u can close the ticket

[nfjdu]

Unfortunately, using fetch that is pretty much impossible - you have to use XhrRequest or a library wrapping that (like axios) for that. That said, even if we would support that so far, the base concept of RTK Query is still "something started" -> "something finished".

I'd recommend doing file uploads in a mutation with a queryFn where you manually create an XhrRequest and tracking the file upload itself by dispatching actions during that to track the upload progress in a separate slice.

Hi. Could you please explain, how can i enchance my generated rtk apis with onUploadProgress? Cant understand how to bypass onUploadProgress callback from react component, as api args type is generated and should not be modified. Seems like i cant even rewrite generated method using enhanceEndpoints, because queryArg type is generated anyway..

import { generatedApi } from '../../generated/api'; 
export const api = generatedApi.enhanceEndpoints({ 
  endpoints: { 
    someGeneratedApiMethod: { 
      query: (queryArg) => ({ 
        url: `/api/v1/someMethod`, 
        method: 'POST', 
        body: queryArg.methodGeneratedArgs, 
        onUploadProgress: queryArg.onUploadProgress // onUploadProgress doesnt exist here :( }), 
    },
  },
}); 

So.. The first question - is there a way to extend arg type of method (in enchanceEndpoints). Second - maybe there is even more easy way to do all this..? Thank you!

[bd-halkoaho]

What we did was:

export const api = generatedApi.enhanceEndpoints({ 
  endpoints: { 
    someGeneratedApiMethod: { 
      query: undefined,
      queryFn: async (arg) => {
        // Do your xhr request here
      },
    },
  },
});

You do have to hard-code the endpoint url in the queryFn, I did not find any way to get it from the generatedApi.

We see this as a workaround, and are hoping for better support for progress in RTK Query.

[nfjdu]

What we did was:

export const api = generatedApi.enhanceEndpoints({ 
  endpoints: { 
    someGeneratedApiMethod: { 
      query: undefined,
      queryFn: async (arg) => {
        // Do your xhr request here
      },
    },
  },
});

You do have to hard-code the endpoint url in the queryFn, I did not find any way to get it from the generatedApi.

We see this as a workaround, and are hoping for better support for progress in RTK Query.

Thanks for quick answer! But anyway, even in queryFn the first param arg has type that is generated by api generator(and there is no onUploadProgress). How you bypass onUploadProgress callback from react(or any other fe framework) component to this code?

[bd-halkoaho]

the first param arg has type that is generated by api generator

No, it actually doesn't. The query: undefined overrides the query from generatedApi. You can define the arg as you wish for the queryFn. So we just pass onUploadProgress in arg.

[nfjdu]

the first param arg has type that is generated by api generator

No, it actually doesn't. The query: undefined overrides the query from generatedApi. You can define the arg as you wish for the queryFn. So we just pass onUploadProgress in arg.

This error appears because of generated api response type:

So.. the only way i see is to override this concrete api absolutely, using injectEndpoints + overrideExisting: true, specifying own args and response types, instead of using enchanceEndponts. Сorrect me please, if i'm wrong

P.S. Yeah, screenshots is not about onUploadProgress, but there is no difference, as either arg or response type are generated as well