Gatsbyのgatsby-source-npmプラグインでnpmjs.comのデータを取得する

Gatsbyのofficial Pluginであるgatsby-source-npm-package-searchを使うことで、npmjs.comにあるデータをGatsbyに取り込むことができます。

install

yarn add gatsby-source-npm-package-search

Configure

  plugins: [
    {
      resolve: `gatsby-source-npm-package-search`,
      options: {
        keywords: ['alexa', 'ask'],
      },
    },

「キーワード」しか指定できないのかよ・・・と感じた方（自分です）、安心してください。

内部のコードをみたところ、「Algoliaでキーワード検索」したデータをGatsbyにストアしています。なので、広めにキーワードを設定して、GraphQL側で絞る方法をとりましょう。

GraphQLクエリを作る

かなりいろんなデータをIndexしてますので、クエリの組み立ても柔軟です。

パッケージのオーナーで絞り込む

例えばこちらはAlexaチームが公開しているライブラリを取得するクエリです。

query MyQuery {
   allNpmPackage(filter: {owner: {name: {eq: "alexa"}}, lastPublisher: {name: {}}}) {
     edges {
       node {
         slug
         title
         homepage
         deprecated
         owners {
           name
           link
           email
         }
       }
     }
     totalCount
   }
 }

正規表現で広く拾うこともできるのですが、たまに予期しないライブラリをひっかけてしまうので、個人的にはあまりお勧めしないかなと思います。

MITライセンスのライブラリ

query MyQuery {
   allNpmPackage(filter: {license: {eq: "MIT"}}) {
     edges {
       node {
         slug
         title
         owners {
           name
           link
           email
         }
         license
       }
     }
     totalCount
   }
 }

GitHubリポジトリベースでの絞り込み

query MyQuery {
   allNpmPackage(filter: {githubRepo: {user: {eq: "hideokamoto"}}}) {
     edges {
       node {
         slug
         title
         license
         githubRepo {
           user
           project
           path
         }
       }
     }
     totalCount
   }
 }

gatsby developで収集されるデータの確認方法

AlgoliaのIndex名やSearch Only API Keyなどはソースをみると確認できます。

yarn add -D algoliasearchしてから、以下のようなスクリプトを動かしてどんなデータが取れるか確認してみるのも手です。

const algoliasearch = require(`algoliasearch`)
const client = algoliasearch(`OFCNCOG2CU`, `6fbcaeafced8913bf0e4d39f0b541957`)
const searchIndex = client.initIndex(`npm-search`)

const browse = ({ ...params }) => {
  let hits = []

  return searchIndex
    .browseObjects({
      batch: batch => (hits = hits.concat(batch)),
      ...params,
    })
    .then(() => hits)
}

const keywords = ['alexa', 'ask']
const buildFilter = keywords.map(keyword => `keywords:${keyword}`)
browse({
  filters: `(${buildFilter.join(` OR `)})`,
  hitsPerPage: 1000,
}).then(data => {
  console.log(data)
}).catch(e => {
  console.log(e)
})

なお、この記事に貼り付けているキーはGatsbyチームが変更した場合に機能しなくなります。もし動かないという場合は、ソースの方を確認してキーやインデックス名が変わっていないかチェックしましょう。

使い所

ちょっと大袈裟かもしれませんが、npmに複数のライブラリを公開している場合はGatsbyのこのプラグインで取得すると手軽そうです。

ただしAlgoliaでの検索がkeywordベースですので、「authorで調べたい」などもう少しシンプルな要件だという場合には、libnpmsearchを使って自前で取得した方が早いかもしれません。