Как отправить файл с помощью RTK Query из Redux Toolkit?

Question

Я пытаюсь использовать мутации запросов RTK для загрузки файла в API. Вот мой код мутации:

          addBanner: builder.mutation({
          query(body) {
            return {
              url: `/api/banners`,
              method: 'POST',
              body,
            }
          },
        })

Вот как я генерирую данные для запроса.

          const [addBanner, { isBannerLoading }] = useAddBannerMutation();

          const new_banner = new FormData();    
    new_banner.append("file", my_file);
    new_banner.append("type", my_type);
    new_banner.append("title", my_title);
    addBanner(new_banner).unwrap().then( () => ... 

Но получаю ошибку:

      A non-serializable value was detected in the state, in the path: `api.mutations.L-Mje7bYDfyNCC4NcxFD3.originalArgs.file`...

Я знаю, что могу полностью отключить несериализуемую проверку с помощью промежуточного программного обеспечения, но я не думаю, что это подходящий способ использования Redux Toolkit и RTK. Без файла все нормально работает. Есть ли правильный способ загрузки файлов с помощью RTK?

Answer 1

Я только что открыл для этого проблему: https://github.com/reduxjs/redux-toolkit/issues/1239 - спасибо, что подняли этот вопрос!

На данный момент вам, вероятно, придется отключить эту проверку (вы можете сделать это для определенного пути в состоянии, сохранив его для остальных с параметра помощьюignoredPath ).

Answer 2

проходитьformDataв запросе.

Так:

       addBanner: builder.mutation({
          query(body) {
            return {
              url: `/api/banners`,
              method: 'POST',
              body,
              formData: true,
            }
          },
        })