Gatsbyを使いこなすには、data-sourceプラグインをどれだけ知っている / 使えるかが鍵かなと思います。ということで、今後お世話になりそうなsource pluginをいろいろ触ってみることにしました。

今回はGitHubリポジトリのContributorを取得するgatsby-source-github-contributorsです。

install

いつも通りnpmから落としてきましょう。

$ yarn add gatsby-source-github-contributors

gatsby-config.jsで取得するリポジトリを指定

リポジトリの指定はconfig側で行います。

// In gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-github-contributors`,
    options: {
      repo: "strawberry-graphql/strawberry"
    }
  }
];

GraphiQLでクエリの確認

yarn developでGraphiQLを立ち上げて、クエリを確認しましょう。

ざっとデータをみる限りでは、このようなクエリになりそうです。

query GET_POST {
   allGitHubContributor {
     nodes {
       avatarUrl
       contributions
       htmlUrl
       id
       name
       login
       url
       type
     }
   }
 }

データを取得する

クエリの内容は決まったので、useStaticQueryで取得しましょう。

import {useStaticQuery, graphql }  from 'gatsby'

type AllGitHubContributorQuery = {
    allGitHubContributor: {
        nodes: {
            avatarUrl: string;
            contributions: string;
            htmlUrl: string;
            id: string;
            name: string;
            login: string;
            url: string;
            type: string;
        }[]
    }
}

const useAllGitHubContributor = () => {
    const {
        allGitHubContributor: {
            nodes
        }
    } = useStaticQuery<AllGitHubContributorQuery>(graphql`query LIST_CONTRIBUTORS {
        allGitHubContributor {
          nodes {
            avatarUrl
            contributions
            htmlUrl
            id
            name
            login
            url
            type
          }
        }
      }`)
    return nodes
}

取得したデータを表示する

あとは表示するReactを実装するだけです。

export const GitHubGontributors: React.FC = () => {
    const nodes = useAllGitHubContributor()
    return (
        <>
            <h1>Contributors</h1>
            <ul>
                {nodes.map(contributor => (
                    <li key={contributor.id} style={{
                        display: 'flex'
                    }}>
                        {contributor.avatarUrl ? <img src={contributor.avatarUrl} width="200"/>:null}
                        <dl>
                            <dt>Name</dt>
                            <dd>{contributor.name}</dd>
                            <dt>Username</dt>
                            <dd>{contributor.login}</dd>
                            <dt>Contribution</dt>
                            <dd>{contributor.contributions}</dd> 
                            <dt>URLs</dt>
                            <dd>
                                <ul>
                                    <li><a href={contributor.htmlUrl}>GitHub</a></li>
                                    <li><a href={contributor.url}>{contributor.url}</a></li>
                                </ul>    
                            </dd>                           
                        </dl>
                    </li>
                ))}
            </ul>
        </>
    )
}

雑にStyle属性をつけて見た目を整えた状態がこちらです。

注意点

クエリの組み方をみるに複数のリポジトリには使えません。

また、GitHubのAPIでスロットリングされた時はTokenをつける必要がある様子です。

plugins: [
  {
    resolve: `gatsby-source-github-contributors`,
    options: {
      repo: "strawberry-graphql/strawberry",
      token: process.env.GITHUB_TOKEN
    }
  }
];

使い所

GitHubでオープンに開発を進めているプロダクトのサイトをGatsbyで作るときに使えそうです。

ただし、この場合「新しくContributionしてくれた人がいたとしても、Gatsby側のビルドが行われないとデータが更新されない」という仕様になる点は要注意です。