Shiro レンダリングleetcodeカード

2024年10月13日#笔记287

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

最新版のShiroはLeetCodeのカードに対応していますが、LeetCodeのAPIはバックエンドでデータを取得する必要があるため、mx-spaceのクラウドファンクションを使用してリクエストを接続しています。クライアント側でMarkdownをレンダリングするロジックがあるため、サーバーサイドレンダリングの利点を活かせず、データ取得もクライアント側で行われます。これを記録しておくことで、後の移行を容易にします。以下は、GraphQLリクエストを行うための一般的な関数のコードです： ```javascript export default async function handler(ctx: Context) { const requestBody = ctx.req.body; 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('LeetCode APIからデータを取得できませんでした'); } return await response.json(); } ``` この文はMix SpaceによってxLogに同期更新されました。

最新版の 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('LeetCode APIからデータを取得できませんでした');
  }
  return await response.json();

}

クラウド関数の設定情報

この記事は Mix Space によって xLog に同期更新されました
元のリンクは https://me.liuyaowen.cn/posts/codenotes/20241013