<p>In my <a href="https://www.trevor-davis.com/blog/why-im-so-excited-about-remix">previous post</a>, I talked about transitioning my site from being powered by <a href="https://craftcms.com/">Craft</a> to being powered by <a href="https://remix.run/">Remix</a> and a GraphQL endpoint coming from Craft. One of the best features of Craft is <a href="https://craftcms.com/features/all#live-preview">Live Preview</a>, and it took a little configuration to get this working on my new Remix powered site.</p>
<h2>Remix Configuration</h2>
<p>These were specific changes that I needed to make on the Remix side, but really it would be the same for any GraphQL request. As Andrew Welch breaks down in <a href="https://nystudio107.com/blog/headless-preview-in-craft-cms">his article</a>, the key is passing the token parameter back that Craft included in the URL.</p>
<p>In the loader function of my blog post route, I call a helper function to setup the GraphQL client, and I pass the request to it:</p>
<script src="https://gist.github.com/davist11/129038286f04bc5e2941baae32ee509e.js?file=$slug.jsx"></script>
<noscript><a href="https://gist.github.com/davist11/129038286f04bc5e2941baae32ee509e#file-slug-jsx">View Gist</a></noscript>
<p>And then in my helper function, I take that request, grab the URL params that I want to include, and add those to my GraphQL request endpoint URL:</p>
<script src="https://gist.github.com/davist11/129038286f04bc5e2941baae32ee509e.js?file=graphql.server.jsx"></script>
<noscript><a href="https://gist.github.com/davist11/129038286f04bc5e2941baae32ee509e#file-graphql-server-jsx">View Gist</a></noscript>
<p>It wasn’t totally necessary to include the <code>x-craft-preview</code> and <code>x-craft-live-preview</code> parameters, but I figured it couldn’t hurt.</p>
<h2>Craft Configuration</h2>
<p>Now with the Remix configuration in place, I just needed to make two small changes to Craft to get it working correctly. First, I had to update the preview target for my Blog section to point to my Remix site:</p>
<figure><img src="{asset:2283:url||//assets.trevor-davis.com/uploads/images/content/blog-section-preview-target.png}" data-image="2283" alt="Setting the preview target in my Blog Section"></figure>
<p>Then, I had to update the <code>config/general.php</code> to allow iframe requests from my Remix domain:</p>
<script src="https://gist.github.com/davist11/129038286f04bc5e2941baae32ee509e.js?file=general.php"></script>
<noscript><a href="https://gist.github.com/davist11/129038286f04bc5e2941baae32ee509e#file-general-php">View Gist</a></noscript>

<h2>Voilà, Live Preview</h2>
<p>And just like that, I had live preview working.</p>
<video src="//assets.trevor-davis.com/uploads/images/content/live-preview.mp4" autoplay="" loop="" muted="" controls="" width="100%"></video>