Astroでnpmのpackages情報を取得・表示する

個人ポートフォリオサイトをAstroで作り直し中です。

公開しているnpmライブラリの情報を取得・表示したかったので、やり方をまとめました。

Package情報をAPIから取得する方法

https://registry.npmjs.org/-/v1/searchでnpm package情報を検索・取得できます。

そこで検索用の関数を用意しました。

  export const searchNPMPackages = async (query) => {
    try {
      const res = await fetch(`https://registry.npmjs.org/-/v1/search?${query}&size=50`)
      const result = await res.json()
      return result
    } catch (e) {
      console.log(e)
      throw e
    }
  }
  

クエリを引数で渡すと、プラグイン情報を検索できます。

const { objects } = await searchNPMPackages('text=@wordpress')
const packages = objects
        .map((object) => object.package)

Astroでデータ取得と表示を行う

検索関数をコンポーネントスクリプトに追加しましょう。

---
const { objects } = await searchNPMPackages('text=@wordpress')
const packages = objects
        .map((object) => object.package)
        .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
---

あとは取得したデータを元に、テンプレートを記述するだけです。

<ul>
    {packages.map(pkg => (
        <li>
            <a href={pkg.links.npm}>{pkg.name}</a>
            <span>{pkg.description}</span>    
        </li>
    ))}
</ul>

これで表示されました。