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

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?

CodePudding user response：

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'));