2022-05-05

Remix と Cloudflare Workers で Craft CMS のデータを表示する

Craft CMS の記事データを Remix と Cloudflare Workers で表示するのを試してみる。

https://remix-cloudflare-worke...

hono も使ってみようかと思ったのだけど、とりあえず Remix の公式サイトにある感じですすめた。

hono/README.ja.md at master · honojs/hono
https://github.com/honojs/hono...

ドキュメント見る限りはかなり便利そうなので使ってみたい。

今回は Remix 自体の路線がなんか気になったので。
ちゃんと React とか理解できていれば hono でいいような気はしつつ。。

GraphQLのデータを fetch で取得する所とかはこの辺を参考にしつつ。

Working With Remix, GraphQL, and StepZen | StepZen blog
https://stepzen.com/blog/worki...

TypeScript も JS も全然わかってない。。。

こんな感じでデータとって

import { useLoaderData,Link } from '@remix-run/react'
import { json } from "@remix-run/cloudflare";

export const loader = async ({request}) => {
    let res = await fetch(`https://example.com/hogehogeapi`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'hogehoge',
      },
      body: JSON.stringify({
        query: `
        query {
          entries(limit:10){
            title
            id
            url
            uri
            slug
            postDate @formatDateTime(format: "Y-m-d")
          }
        }`,
        // variables: {
        //   query: search,
        // },
      }),
    })
    return res.json()
}

こんな感じで一覧表示する

export default function Index() {
  const { data } = useLoaderData();
  return (
    <div className="container mx-auto">
      <header>
        <h1 className="text-3xl"><Link to="/">mersy note</Link></h1>
      </header>
      <main>
        {data ? (
          <div className="prose lg:prose-xl">
            {data.entries.map((entry) => (
              <ul key={entry.id}>
                <li className="inline-grid">
                  <time className="">{entry.postDate}</time>
                  <Link to={`/article/${entry.slug}`} prefetch="intent">
                  {entry.title}
                  </Link>
                </li>
              </ul>
            ))}
          </div>
        ) : <h4>No Results</h4>}
      </main>
    </div>
  );
}

Cloudflare Workers の script サイズ制限が気になるところ。
できるだけ不要な物は読み込まない方がいいんだろうな。

細かい最適化とかは色々と自分でやらないといけない。
Next.js とかだとよしなにやってくれるんだろうけど。

Next.js & Vercel とか環境が依存してしまうところがなんか気になってしまう。
まぁ、今回のは Cloudflare Workers に依存してるわけだからそれもそれで何だかなぁと思わなくもない。

これらのエントリを何度も拝見して勉強させてもらった

感謝感謝。

ライブプレビュー

ライブプレビューも作らないとだなぁ。。。。

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

詳細ページ周りの作りをごにょごにょする感じなんだと思うが。
なんかこの作業が毎回無駄に感じてしまってなかなか Twig ベースから抜けられない。

Twig ベースでもCDNに乗せてしまえば要件を満たせる場合もあるのでは？と思わなくもない。

まぁ、大きくなったjs周りとかを直していこうと思うと jsベースのフレームワークで作り直して行くことになるだろうし。

触ってみて思ったけど、サイト側の表示がどういう仕組みであれ、CDN （サービス）側でこういうことがやれるのは色々と便利そう。

Cloudflare Workers + KV で301リダイレクトをサーバレスに実装してみる | DevelopersIO
https://dev.classmethod.jp/art...

引き続き、データの更新とか、諸々試してみる。