署名付きURLに変えたらキャッシュが効かなくなった — expo-image のキーを URL から切り離す

// lib/imageKey.ts
import * as Crypto from "expo-crypto";
 
/** キーに含める変換パラメータ。ここに無いクエリは同一性に影響させません */
const VARIANT_PARAMS = ["w", "h", "fm", "q", "dpr"] as const;
 
/**
 * 署名付きURLから、署名に依存しない安定キーを導きます。
 * 同じオブジェクト・同じ変換なら、署名が変わっても同じ文字列を返します。
 */
export async function stableImageKey(url: string): Promise<string> {
  const u = new URL(url);
 
  // 変換パラメータのみを、順序を固定して取り出す
  const variant = VARIANT_PARAMS
    .map((p) => {
      const v = u.searchParams.get(p);
      return v === null ? null : `${p}=${v}`;
    })
    .filter((s): s is string => s !== null)
    .join("&");
 
  // ホスト名は含めません。CDN 移行でキャッシュ全滅を起こさないためです
  const canonical = variant ? `${u.pathname}?${variant}` : u.pathname;
 
  return Crypto.digestStringAsync(
    Crypto.CryptoDigestAlgorithm.SHA256,
    canonical
  );
}
 
// 期待する出力（署名だけが違う2つのURL）
// stableImageKey(".../w042.webp?w=1080&X-Amz-Signature=6f1c...")
//   → "3b7c9f...".  同じ
// stableImageKey(".../w042.webp?w=1080&X-Amz-Signature=a93e...")
//   → "3b7c9f...".  同じ
// stableImageKey(".../w042.webp?w=540&X-Amz-Signature=a93e...")
//   → "e14a02...". 変換が違うので別キー

// lib/imageCache.ts
import { Image } from "expo-image";
import { stableImageKey } from "./imageKey";
 
type Resolver = (objectPath: string) => Promise<string>; // 署名付きURLを発行する関数
 
/**
 * 安定キーで先にキャッシュを引き、無ければ署名を取り直して取得・保存します。
 * 返り値は <Image source={{ uri }} /> にそのまま渡せるローカルパスです。
 */
export async function resolveCachedImage(
  objectPath: string,        // 例: "/wallpapers/w042.webp"
  variantQuery: string,      // 例: "w=1080&fm=webp"
  sign: Resolver
): Promise<string> {
  // キー導出は署名を必要としません。ここが重要です
  const key = await stableImageKey(
    `https://placeholder.invalid${objectPath}?${variantQuery}`
  );
 
  const cached = await Image.readFromCacheAsync(key);
  if (cached) {
    return cached; // 署名を一度も発行せずに返せます
  }
 
  // ここで初めて署名を発行する。発行回数そのものが減ります
  const signed = await sign(`${objectPath}?${variantQuery}`);
  const written = await Image.writeToCacheAsync(signed, { cacheKey: key });
 
  return written ?? signed; // 書き込みに失敗しても表示は止めません
}

// components/WallpaperThumb.tsx
import { useEffect, useState } from "react";
import { Image } from "expo-image";
import { resolveCachedImage } from "../lib/imageCache";
import { signObject } from "../lib/sign";
 
export function WallpaperThumb({ objectPath }: { objectPath: string }) {
  const [uri, setUri] = useState<string | null>(null);
 
  useEffect(() => {
    let alive = true;
    resolveCachedImage(objectPath, "w=1080&fm=webp", signObject)
      .then((u) => alive && setUri(u))
      .catch(() => alive && setUri(null)); // 失敗時はプレースホルダのまま
    return () => {
      alive = false; // 高速スクロール中のアンマウント対策
    };
  }, [objectPath]);
 
  return (
    <Image
      source={uri ? { uri } : undefined}
      cachePolicy="memory"   // ディスク層は自前で握っているのでメモリのみに
      style={{ width: 120, height: 213 }}
      transition={120}
    />
  );
}

// lib/fetchWithResign.ts
const RESIGNABLE = new Set([401, 403]);
 
/**
 * 署名切れ（401/403）のときだけ一度だけ署名を取り直して再試行します。
 * 404 や 5xx で再署名しても意味がないので、対象を絞ります。
 */
export async function fetchWithResign(
  objectPath: string,
  variantQuery: string,
  sign: (p: string) => Promise<string>
): Promise<Response> {
  const target = `${objectPath}?${variantQuery}`;
  let res = await fetch(await sign(target));
 
  if (RESIGNABLE.has(res.status)) {
    res = await fetch(await sign(target)); // 再署名は1回まで
  }
  return res;
}
 
// 期待する挙動
// 200 → そのまま返る（署名発行1回）
// 403 → 再署名して200（署名発行2回）
// 404 → 再署名せずそのまま404（無駄な発行をしない）