Download Blob with React Query, createObjectURL error

Viewed 288

Using fetch I can create a download link by doing the following code

const result = await fetch(authLinkProps.url, {
      headers: {
        Authorization: getUserToken(),
      },
    });

    const blob = await result.blob();
    const href = window.URL.createObjectURL(blob);

All works fine but I'm using React Query for my project so I want to be consistent and use this to do the same thing.

If I do the following

const { data, error } = useDocuments(authLinkProps.url);
let href: string = '';
console.log(data);
if (data !== undefined) {
    href = window.URL.createObjectURL(data);
}

Where useDocuments is

return useQuery<Blob, Error>('document-download', async () => {
    const dwnldHeader = {
      headers: {
        Authorization: currentUser,
        responseType: 'blob',
      },
    };
    const { data } = await axios.get<Blob>(apiUrl, dwnldHeader);
    return data;
  });

I get the error

"Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed."

Data looks like a blob if I console it out?

Any ideas?

0 Answers
Related