What is the commonjs equivalent of doing var = return await myAsyncFunction() outside of asyncfunction?

Question

I am trying to connect my express router functions to ReactJS. Currently my code Looks Like this:

nftmodule.js

import {ZDK} from '@zoralabs/zdk'




const zdk = new ZDK("https://api.zora.co/graphql")

export async function fetchTokens(zdk, collectionAddresses){
  return await zdk.tokens({
    where: {
      collectionAddresses
    }
  })
} 

const tokens = await fetchTokens(zdk, '0x42069ABFE407C60cf4ae4112bEDEaD391dBa1cdB')

export function aToken(){
  return tokens
}

Then it pops into here

nftwholecollection.js

import { aToken, fetchTokens} from './nftmodule.js'
import {ZDK} from '@zoralabs/zdk'

const zdk = new ZDK("https://api.zora.co/graphql")

let token = await fetchTokens(zdk, '0x42069ABFE407C60cf4ae4112bEDEaD391dBa1cdB')
let thistoken = JSON.stringify(token,null,3)
console.log(JSON.parse(thistoken).tokens.nodes[3].token.image)


let collectionSize = 40;


const tokens = aToken()

let nftGallery = JSON.stringify(tokens,null,3)
let x

export function loopLinks()
{
  let output =""
    for(x =0;x<collectionSize; x++)
    if (JSON.parse(nftGallery).tokens.nodes[x].token.image.mediaEncoding.__typename != "UnsupportedEncodingTypes") {
    output = output + `<img src=${JSON.stringify(JSON.parse(nftGallery).tokens.nodes[x].token.image.mediaEncoding.thumbnail)} loading='lazy'>`
    }
    return output
}
console.log(loopLinks())

then finally nftrouter.js

import {loopLinks} from './nftwholecollection.js'
import express from 'express'

console.log(loopLinks())


const app = express();
const port = 5150;


app.get('/api/nft',(req,res)=>{
  res.setHeader("Content-Type", "text/html")
  res.write(loopLinks())
  res.end()
})

app.listen( port ,()=>{
    console.log("the server got 5150'd")
});

It seems that I have two options here. I can either figure out how to get my modules to appear in react.js or I can figure out how to write the above code in commonjs. I am attempting to do the latter.

I have run into several issues all basically centered around trying to figure out the common js equivalent of "let token = await fetchTokens(zdk, 'blablablacrypto')"

When I tried to set the type to commonjs in packagejson I obviously got an error in nftmodule about not being able to reference await outside of the body of the async function in commonjs. What is the commonjs solution for this?

Answer 1

I would try something like this to use top level await.

nftmodule.js

import {ZDK} from '@zoralabs/zdk'

const zdk = new ZDK("https://api.zora.co/graphql")

async function fetchTokens(zdk, collectionAddresses){
  return await zdk.tokens({
    where: {
      collectionAddresses
    }
  })
} 

// Here we use top level await
export default await fetchTokens(zdk, '0x42069ABFE407C60cf4ae4112bEDEaD391dBa1cdB')

nftwholecollection.js

// Now this module will wait for the promise to resolve before executing
import tokens from './nftmodule.js'

let collectionSize = 40;

let nftGallery = JSON.stringify(tokens,null,3)
let x

export function loopLinks()
{
  let output =""
    for(x =0;x<collectionSize; x++)
    if (JSON.parse(nftGallery).tokens.nodes[x].token.image.mediaEncoding.__typename != "UnsupportedEncodingTypes") {
    output = output + `<img src=${JSON.stringify(JSON.parse(nftGallery).tokens.nodes[x].token.image.mediaEncoding.thumbnail)} loading='lazy'>`
    }
    return output
}
console.log(loopLinks())

nftrouter.js (the same as before)

import {loopLinks} from './nftwholecollection.js'
import express from 'express'

console.log(loopLinks())


const app = express();
const port = 5150;


app.get('/api/nft',(req,res)=>{
  res.setHeader("Content-Type", "text/html")
  res.write(loopLinks())
  res.end()
})

app.listen( port ,()=>{
    console.log("the server got 5150'd")
});