2022-05-10

Craft CMS のデータを GraphQL で取得して Cloudflare Workers KV に保存・取得する

先日の続き。

GraphQL で取得したデータを毎回とりにいってたら意味ないのでそこのレスポンスは KV に保存しておく。

KV · Cloudflare Workers docs
https://developers.cloudflare....

これもこちらの記事が非常に参考になった。

wrangler.toml の書き方をちゃんとドキュメント読んで理解していないのが問題だが、

kv_namespaces = [ 
  { binding = "MY_KV", id = "..." }
]

を wrangler.toml の末尾に入れたときは get, put がうまいこと使えなかった。

[site]
bucket = "./public"
entry-point = "."

の前に持って行って無事使えた。

key には url の pathname をつかったのでこんな感じで設定してみた。

const KV_PREFIX = 'v1:api_cache:'

export const loader = async ({request}) => {
  const url = new URL(request.url);
  const key = KV_PREFIX + url.pathname
  let json = await <$MY_KV$>.get(key, "json")

  if (!json) {
    let res = await fetch(`https://example.com/hogeapi`, {

〜〜GraphQLのクエリとかとか〜〜

    json = await res.json()
    await <$MY_KV$>.put(key, JSON.stringify(json))
    return json
  }
  return json
}

KV からデータとれなければ GraphQL のデータを fetch して KV にセットしつつ return する。
KVからとれてるときはそのまま return 。

CloudFlare Workers の KV の管理画面を見るとこんな感じでたまっていっているのが確認できる。

20220504 0915

後はここに CMS 側で記事を更新したときに KV のデータを更新する or 削除するといった方法も考える必要あり。
全部消しちゃって再度取得してKVに入れるのでもいいだろうし、該当する物だけを削除する、とかできれば良さそうな気もするけど、、

HTMLのキャッシュを CDN が返してくれる方がわずかながら早いんじゃなかろうか、っていうきもしつつ。
キャッシュを消すという視点だと CDN の方が色々キーの指定とかできて楽そうなイメージがある。
でもそれは prefix をちゃんとやれば良さそうな気もする。

Remix に限らず Node.js での WebサーバがいてSSR。
そこの前段のCDNがキャッシュする方がいいのかどうなのか。
薄っぺらい所しか把握できていないからこの辺よくわかってないな。。。

KVの管理画面、一瞬404になったり、表示されるまで時間がかかるので、早とちりしそう。

20220504 0925