title: (Gatsby) Datawrapper iframes aren't displaying before I've refreshed the page
body: <p>I'm using <a href="https://datawrapper.de" rel="nofollow noreferrer">Datawrapper</a> to display graphs as iframes on my website.</p>
  <p>I just recently migrated from Remark to MDX. With the new setup, my Datawrapper graphs aren't loading before the page that contains the graphs is allowed to load in the &quot;traditional&quot; sense (i.e., hitting refresh or following the page that contains the graphs directly).</p>
  <p>So, if you follow this link, the graphs display fine: <a href="https://kolstadmagnus.no/ekspert-mener-a-ha-svaret-bak-krfs-stortingssmell" rel="nofollow noreferrer">kolstadmagnus.no/ekspert-mener-a-ha-svaret-bak-krfs-stortingssmell</a>.</p>
  <p>But if you go to the home page (<a href="https://kolstadmagnus.no" rel="nofollow noreferrer">kolstadmagnus.no</a>) and then hit the link (second-top post), the graphs won't display.</p>
  <hr />
  <h3>Some context</h3>
  <p>Datawrapper iframes use this script so that the iframes will be responsive:</p>
  <pre><code>!function(){&quot;use strict&quot;;window.addEventListener(&quot;message&quot;,(function(e){if(void 0!==e.data[&quot;datawrapper-height&quot;]){var t=document.querySelectorAll(&quot;iframe&quot;);for(var a in e.data[&quot;datawrapper-height&quot;])for(var r=0;r&lt;t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data[&quot;datawrapper-height&quot;][a]+&quot;px&quot;}}}))}();
  </code></pre>
  <p>Since Gatsby works the way it does (not loading every page &quot;traditionally&quot;—sorry, I don't know what the feature is called), I have had to put this script in the html.js file, like this:</p>
  <pre><code>&lt;body {...props.bodyAttributes}&gt;
    {props.preBodyComponents}
    &lt;div
      key={`body`}
      id=&quot;___gatsby&quot;
      dangerouslySetInnerHTML={{ __html: props.body }}
    /&gt;
    {props.postBodyComponents}
    &lt;script
      dangerouslySetInnerHTML={{
        __html: `
              !function(){&quot;use strict&quot;;window.addEventListener(&quot;message&quot;,(function(e){if(void 0!==e.data[&quot;datawrapper-height&quot;]){var t=document.querySelectorAll(&quot;iframe&quot;);for(var a in e.data[&quot;datawrapper-height&quot;])for(var r=0;r&lt;t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data[&quot;datawrapper-height&quot;][a]+&quot;px&quot;}}}))}(); `
      }}
    /&gt;
  &lt;/body&gt;;
  </code></pre>
  <p>This causes the script to be executed for the entire website instead of just for that single page, thereby solving the issue where hitting refresh would be required after entering the pages with the iframes.</p>
  <hr />
  <p>With MDX though, problems are back. But now the iframes don't display at all.</p>
  <p>How do I solve this?</p>