Asynchronous rendering of Shopify Liquid Snippet in theme app extensions

Question

I am trying to call a backend Api and then render Shopify product. But the problem is I cannot assign variable from JS to Shopify liquid file.

Here's the function that I am running:

<script async defer>
  const BACKEND_SHOPIFY_URL="/apps/client/upsells";
      (async()=>{
        try {
          const response =  await fetch(`${BACKEND_SHOPIFY_URL}?position={{ position }}`);
          const data= await response.json();
          {% assign result= "SOMETHING HERE" %}        // need to assign result = data
          }
        catch(err) {
            console.log(err,'error');
              }
      })();
</script>

I tried almost everything, but no success. How can I render it asynchronously? I came across the fetch filter, which I am not sure how I can import in theme app extension of mine. JS is a client side language and liquid is server side. Is there any way, we can rerender certain components?

Answer 1

Store your upsell data with metafields or meta objects. Render the data with liquid. After that, use js to render your component. This is the typical way