Craft CMS の Live Preview で Remix / Cloudflare Workers のページを使う #craftcms

先日の続き。

この辺になってくると、Remix も Cloudflare Workers もあまり関係なくなってくるが。。。
どうも公開サイト側のURLでプレビューするとかが慣れないんだけど。

Craft CMS 側でエントリを作成したときの Live Preview を試してみる。

編集してみる

とりあえず編集されているのは確認できる。
どうしても通信するからレスポンスが気になるが、、、

パラメータとってクエリ投げるところのコードとしてはこんな感じか。

〜〜略〜〜

  const allowedKeys = ['x-craft-preview', 'x-craft-live-preview', 'token']
  const filteredParams = Object.entries(
    Object.fromEntries(url.searchParams)
  ).filter(([key]) => allowedKeys.includes(key))
    if (filteredParams.length) {
      const queryString = filteredParams.map((val) => val.join('=')).join('&')
      let res = await fetch(`${END_POINT}?${queryString}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': API_TOKEN,
        },
        body: JSON.stringify({
          query: `
          query($slug: [String]) {

〜〜略〜〜

つまるところ、エンドポイントへのアクセスに、 token をつけて渡してあげればいいってことだった。

• Setting Up Live Preview with Craft CMS in Headless Mode | Blog | Trevor Davis | Senior Software Engineer @ Dutchie
  https://www.trevor-davis.com/b…
• nystudio107 | Headless Preview in Craft CMS
  https://nystudio107.com/blog/h…

なんかもっと難しく考えていた。。。

あとは、js ほんとわかってないなー、ってのも改めて。