ShiroでLeetCodeカードを描画する

最新版のShiroではLeetCodeのカードに対応していますが、LeetCodeのAPIではバックエンドでデータを取得する必要があるため、ここではmx-spaceのクラウド関数でリクエストを中継しています

なぜこんなにも回り道をするのか。サーバーでデータを取得してから描画すればいいのに、どうやらMarkdownの描画ロジックがクライアント側にあるため、データの取得もクライアント側で行われてしまい、SSRの利点を活かせない度量。

後で移行しやすいように、先に記録しておきます。

export default async function handler(ctx: Context) {
  const requestBody =ctx.req.body
  // 通用的 GraphQL 请求函数
  const response = await fetch('https://leetcode.cn/graphql/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestBody),
  });
  if (!response.ok) {
    throw new Error('Failed to fetch data from LeetCode API');
  }
  return await response.json();

}

クラウド関数設定情報

後で移行しやすいように、先に記録しておきます。

export default async function handler(ctx: Context) {
  const requestBody =ctx.req.body
  // 通用的 GraphQL 请求函数
  const response = await fetch('https://leetcode.cn/graphql/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestBody),
  });
  if (!response.ok) {
    throw new Error('Failed to fetch data from LeetCode API');
  }
  return await response.json();

}

クラウド関数設定情報