mottox2 blog

GatsbyJS v2 はじめの一歩 (6) Source Pluginの利用

bloggatsby

今までの記事
GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ
GatsbyJS v2 はじめの一歩 (2) 実際にページを作る
GatsbyJS v2 はじめの一歩 (3) ページにスタイルを当てる
GatsbyJS v2 はじめの一歩 (4) gatsby buildとデプロイ
GatsbyJS v2 はじめの一歩 (5) GraphQLによるデータ管理


前回の記事でGraphQLを使ってデータをReactコンポーネントに呼び出す方法を書きました。今回は自分で定義したデータだけではなくプラグインを使ってWeb APIなどのデータを利用する方法を説明します。

外部のソースデータを取り込むのに一番簡単な方法はSourcePluginを利用する方法です。例えばgatsby-source-filesystemgatsby-source-medium, gatsby-source-githubなど色んなサービスのAPIを利用するプラグインが開発されています。(これらのプラグインはSource Pluginと呼ばれ、gatsby-source-xxxという命名規則になっています。)

例としてHackerNews(Y Combinatorというベンチャーキャピタルの運営するニュースサイト)を利用するgatsby-source-hacker-newsを使ってみます。

プラグインの利用方法はgatsby-plugin-styled-componentsを使用したときのようにgatsby-config.jsにプラグインの名前を記載します。プラグインの利用の際にはGitHubのREADME.mdを見てgatsby-confi.jsgにプラグインの情報を追記します。

gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-source-hacker-news'
  ]
}

gatsby-config.jsの変更が終わったらgatsby developを実行しGraphiQL ( http://localhost:8000/___graphql )を開きましょう。開いて画面左の入力欄に次のGraphQLクエリを入力して実行しましょう。実行すると次のような結果が得られます。allHnStoryはREADMEに書いてあるQuery例を元に入力しました。

{
  allHnStory {
    edges {
      node {
        id
        title
        score
        order
        domain
        url
      }
    }
  }
}

localhost_8001____graphql_query=%23%20Welcome%20to%20GraphiQL%0A%23%0A%23%20GraphiQL%20is%20an%20in-browser%20tool%20for%20writing%2C%20validating%2C%20and%0A%23%20testing%20GraphQL%20queries.%0A%23%0A%23%20Type%20queries%20into%20this% (1).png (596.0 kB)

これで https://news.ycombinator.com/ と同じデータがGraphQLで取得することが出来ました。このようにSource Pluginを利用することでWeb APIのあるサービスのデータを利用することが出来ます。

次は、このデータをReactコンポーネントから呼び出しましょう。GraphQLによるデータ管理 で示した例と同様に次のようなコードと実行結果になります。

src/hn.jsx
import React from "react"
import { graphql } from "gatsby"

export const query = graphql`
  query {
    allHnStory {
      edges {
        node {
          id
          title
          score
          order
          domain
          url
        }
      }
    }
  }
`

export default (props) => <div>
  {
    props.data.allHnStory.edges.map(story => <a style={{ color: 'inherit'}} href={story.node.url}>
      {story.node.title}
      <small style={{display: 'block'}}>{story.node.score} Point | {story.node.domain}</small>
    </a>)
  }
</div>

localhost_8001_.png (463.4 kB)

いかがでしょうか、このようにGatsbyJSではリポジトリの外のコンテンツにも簡単にアクセスしてサイト内のコンテンツとして利用することが可能です。
次は、外部から持ってきたデータを元に動的にページを生成する方法を紹介します。

B!
event

技術書典6にサークル参加したけど反省点が多すぎた

前回に引き続き、技術書典6にサークル主として参加させていただきました。 技術同人誌界隈はかつてない盛り上がりを見せており、今回のサークル当落発表の際は地獄のようなタイムラインになっていました。そうい

技術書典
summary

最近見つけた気になる作図系Webサービス3選

今年に入って見つけた作図、画像生成系のサービスをまとめてみました。 > BlobmakerBlobmaker 最近見かけることが多くなった、丸みのある形状をランダムで生成する画像メーカー。

dev

技術書典6でNetlifyとGatsby本を頒布します

技術書典6「か67」でNetlifyとGatsbyの本を頒布します。 Netlifyは92ページ、Gatsbyは100ページ超(執筆中)でどちらとも¥1,000で頒布を予定しています。 興味のあ

gatsbynetlify技術書典