category

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

2022-05-11

先日の続き。

2022-05-05
2022-05-06
2022-05-07
2022-05-09
2022-05-10

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

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

20220511 1542

編集してみる

20220511 1543

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

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

〜〜略〜〜

  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 をつけて渡してあげればいいってことだった。

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

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