How do I await a .wasm (WebAssembly file) from a Rest API? - rest

Question

I am making a Next.js app that has a page that connects to a REST API. The REST API simply spits out a raw .wasm (WebAssembly) file. I know that sounds atypical but it's 100% necessary for my app. I have this function which is supposed to fetch the .wasm file from the API:
const fetchedWasmWrapped = useCallback( async () => {
const endpoint = "/.netlify/functions" + "/decrypt?authSig="+JSON.stringify(props.props.authSig);
const options = {
method: 'GET',
headers: {
'Content-Type': 'application/wasm',
},
};
const response = await fetch(endpoint, options);
const result = await response.text();
console.log(result);
setDecryptedWasm(result);
}, [props.props.authSig])
The function works. It DOES output the .wasm file but console.log(result) writes a bizarre string with a lot of symbols and empty characters. I believe the reason why result is all jumbled up is because I don't think WebAssembly is meant to be printed as a string. It's actually a blob. result is then read as a file later in my app but that fails and I'm assuming it's because the WebAssembly code was not imported as a blob but rather a string.
So how do I tell typescript that I want the ".wasm" code from response? I don't believe there a response.wasm() function so how do I do this?

Answer 1

The key is that you have to change const result = await response.text(); to const result = await response.blob();
This threw more errors in my vscode terminal because setDecryptedWasm was expecting a string. So change const [decryptedWasm, setDecryptedWasm] = useState(''); to const [decryptedWasm, setDecryptedWasm] = useState(new File([], ''));
And rather than setting decryptedWasm with setDecryptedWasm(result), do setDecryptedWasm(new File([result], 'myunityapp.wasm'));