In an Astro component MyScript.astro with a fetch call i am requesting the html from the response. It's returning e.g. <script async src="https://my-api"></script>.

    // MyScript.astro
    ---
    const { prop1, prop2 } = Astro.props;
    
    const response = await fetch(import.meta.env.API_URL, {
      method: 'POST',
      headers: new Headers({
        'Content-Type': 'application/json',
        'My-Key': import.meta.env.API_KEY,
      }),
      body: JSON.stringify({
        prop1,
        prop2
    
      }),
    });

const { html } = await response.json();
---

How do I return / output html in the body of the page as code?

Update:

I use now:

<Fragment set:html={html} />

That seems to work.

In an Astro component MyScript.astro with a fetch call i am requesting the html from the response. It's returning e.g. <script async src="https://my-api"></script>.

    // MyScript.astro
    ---
    const { prop1, prop2 } = Astro.props;
    
    const response = await fetch(import.meta.env.API_URL, {
      method: 'POST',
      headers: new Headers({
        'Content-Type': 'application/json',
        'My-Key': import.meta.env.API_KEY,
      }),
      body: JSON.stringify({
        prop1,
        prop2
    
      }),
    });

const { html } = await response.json();
---

How do I return / output html in the body of the page as code?

Update:

I use now:

<Fragment set:html={html} />

That seems to work.

• javascript
• html
• json
• astrojs
• stringify

1 Answer 1

You can use set:html:

// MyScript.astro
---
const data = await fetch(url).then(res => res.json())
---

<Fragment set:html={data.html} />