あなたも私と同じなら、おそらく複數(shù)のブログ プラットフォームに書いているでしょう。私の場合、さまざまな視聴者にリーチするために Dev.to と Hashnode の両方を使用しています。しかし、すべての投稿を個(gè)人サイトに表示したい場合はどうなるでしょうか?今日は、Astro で構(gòu)築したポートフォリオに両方の API をどのように統(tǒng)合したかを説明します。

挑戦

主な課題は次のとおりです:

1. 2 つの異なる API からメッセージを取得します
2. データ形式の統(tǒng)一
3. 時(shí)系列に並べます
4. エラーとレート制限の処理
5. TypeScript による安全な入力

初期設(shè)定

まず、データを入力するためのインターフェイスを定義します。

interface BlogPost {
  title: string;
  brief: string;
  slug: string;
  dateAdded: string;
  rawDate: string;
  coverImage: string;
  url: string;
  source: string;
}

interface HashnodeEdge {
  node: {
    title: string;
    brief: string;
    slug: string;
    dateAdded: string;
    coverImage?: {
      url: string;
    };
    url: string;
  };
}

開発者との統(tǒng)合

Dev.to API は RESTful で、非常に簡単です。私がそれを?qū)g裝した方法は次のとおりです:

async function getDevToPosts() {
  try {
    const params = new URLSearchParams({
      username: 'tuUsuario',
      per_page: '20',
      state: 'all',
      sort: 'published_at',
      order: 'desc'
    });

    const headers = {
      'Accept': 'application/vnd.forem.api-v1+json'
    };

    // Agregar API key si está disponible
    if (import.meta.env.DEV_TO_API_KEY) {
      headers['api-key'] = import.meta.env.DEV_TO_API_KEY;
    }

    const response = await fetch(`https://dev.to/api/articles?${params}`, { headers });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    const posts = await response.json();

    return posts.map((post: any) => ({
      title: post.title,
      brief: post.description,
      slug: post.slug,
      dateAdded: formatDate(post.published_timestamp),
      rawDate: post.published_timestamp,
      coverImage: post.cover_image || '/images/default-post.png',
      url: post.url,
      source: 'devto'
    }));
  } catch (error) {
    console.error('Error al obtener posts de Dev.to:', error);
    return [];
  }
}

ハッシュノードの統(tǒng)合

Hashnode は GraphQL を使用しますが、これには少し異なるアプローチが必要です。

async function getHashnodePosts() {
  try {
    const query = `
      query {
        publication(host: "tuBlog.hashnode.dev") {
          posts(first: 20) {
            edges {
              node {
                title
                brief
                slug
                dateAdded: publishedAt
                coverImage {
                  url
                }
                url
              }
            }
          }
        }
      }
    `;

    const response = await fetch('https://gql.hashnode.com', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query })
    });

    const { data } = await response.json();

    return data.publication.posts.edges.map((edge: HashnodeEdge) => ({
      title: edge.node.title,
      brief: edge.node.brief,
      slug: edge.node.slug,
      dateAdded: formatDate(edge.node.dateAdded),
      rawDate: edge.node.dateAdded,
      coverImage: edge.node.coverImage?.url || '/images/default-post.png',
      url: edge.node.url,
      source: 'hashnode'
    }));
  } catch (error) {
    console.error('Error al obtener posts de Hashnode:', error);
    return [];
  }
}

結(jié)果を組み合わせる

投稿を組み合わせて並べ替えると魔法が起こります:

const hashnodePosts = await getHashnodePosts();
const devtoPosts = await getDevToPosts();

const allBlogPosts = [...hashnodePosts, ...devtoPosts]
  .sort((a, b) => new Date(b.rawDate).getTime() - new Date(a.rawDate).getTime());

エラー処理とレート制限

レート制限とエラーを処理するために、次の戦略を?qū)g裝しました。

クライアント側(cè)キャッシュ:

const CACHE_DURATION = 5 * 60 * 1000; // 5 minutos
let postsCache = {
  data: null,
  timestamp: 0
};

async function getAllPosts() {
  const now = Date.now();
  if (postsCache.data && (now - postsCache.timestamp) < CACHE_DURATION) {
    return postsCache.data;
  }

  // Obtener y combinar posts...

  postsCache = {
    data: allBlogPosts,
    timestamp: now
  };
  return allBlogPosts;
}

指數(shù)バックオフによる再試行:

async function fetchWithRetry(url: string, options: any, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url, options);
      if (response.status === 429) { // Rate limit
        const retryAfter = response.headers.get('Retry-After') || '60';
        await new Promise(resolve => setTimeout(resolve, parseInt(retryAfter) * 1000));
        continue;
      }
      return response;
    } catch (error) {
      if (i === retries - 1) throw error;
      await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));
    }
  }
}

Astro でレンダリング

最後に、Astro コンポーネントで投稿をレンダリングします。

---
const allBlogPosts = await getAllPosts();
---

<div>



<p>この統(tǒng)合により、次のことが可能になります。</p>

<ul>
<li>投稿の信頼できる?yún)g一の情報(bào)源を維持する</li>
<li>複數(shù)のプラットフォームからのコンテンツを表示</li>
<li>エラーをエレガントに処理します</li>
<li>入力された安全なコードを維持する</li>
</ul>

<p>完全なコードは私の GitHub で入手できます。</p>

<p>他のブログ プラットフォームをサイトに統(tǒng)合しましたか?コメントであなたの経験を共有してください！ ?</p>

<h2>
  
  
  webdev #astro #typescript #api
</h2>


          </div>

            
        

以上が複數(shù)のブログ API を Astro サイトに統(tǒng)合: Dev.to と Hashnodeの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。