`undefined` in response.body when responseType is 'blob' or 'arraybuffer'

[Aybee5]

When I set the responseType: 'blob' for a request, the response.body is undefined, similar to the following axios issue https://github.com/axios/axios/issues/1392

Example something like this

xior.post(
  'http://assets.xxxxx.org:3000/uploads/3ba6921c-031e-426b-94a3-a4b966fc145f/documents/0f6a1d1166.pdf',
{
  headers: {
    Accept: 'application/pdf',
  },
  responseType: 'blob',
},
)
.then(response => {
  console.log(response.data); //undefined
})

[suhaotian]

The post method paramater should be: xior.post('apiUrl', {}, {responseType: 'blob'})

When responseType: 'blob', xior don't do anything to the response, it will return the original response like fetch:

xior.get('https://exmaple.com/some/api', null, {responseType: 'blob'}).then(res => {
  console.log(res.response)
});

Same with fetch's response:

fetch('https://exmaple.com/some/api').then(response => {
  console.log(response)
});

---

BTW, what you want do with this blob?

if you want download pdf, you can:

// For browser
xior
  .post(
    'http://assets.xxxxx.org:3000/uploads/3ba6921c-031e-426b-94a3-a4b966fc145f/documents/0f6a1d1166.pdf',
    null,
    {
      headers: {
        Accept: 'application/pdf',
      },
      responseType: 'blob',
    }
  )
  .then((res) => res.response.blob())
  .then((blob) => {
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'filename.pdf';
    document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
    a.click();
    a.remove(); //afterwards we remove the element again
  });

For nodejs:

https://github.com/suhaotian/xior?tab=readme-ov-file#3-how-do-i-handle-responses-with-types-like-stream-document-arraybuffer-or-blob

[Aybee5]

Thank you for your response.

Yes, I am passing the options as the third argument, let me see if I can get a public URL I can use as a production.

---

This is what I am currently doing, I just wanted to bring your attention to it in case it's a bug 🐛

if you want download pdf, you can:

// For browser
xior
  .post(
    'http://assets.xxxxx.org:3000/uploads/3ba6921c-031e-426b-94a3-a4b966fc145f/documents/0f6a1d1166.pdf',
    null,
    {
      headers: {
        Accept: 'application/pdf',
      },
      responseType: 'blob',
    }
  )
  .then((res) => res.response.blob())
  .then((blob) => {
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'filename.pdf';
    document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
    a.click();
    a.remove(); //afterwards we remove the element again
  });

[suhaotian]

Currently, xior just return the original fetch response when responseType is not 'undefined', 'text' or 'json'.

And I update the README. Thank you for report this 🙌

[suhaotian]

Yeah, it will be a little confuse, I will reopen this issue, and fix in next version.

Again, thanks for the feedback!

[Aybee5]

Thank you, suhaotian

[Aybee5]

Also, I'll like to make this contribution. From my understanding, the changes will be somewhere around https://github.com/suhaotian/xior/blob/main/src%2Fxior.ts#L290, right?

[suhaotian]

@Aybee5 Welcome contribution!

It's Here: https://github.com/suhaotian/xior/blob/main/src%2Fxior.ts#L319

[suhaotian]

Merged then the issue automatic closed! (well done, github!)