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!
tips

Google Chromeスクショ術

技術同人誌やブログを書く上で外せないのがスクリーンショットを取ることです。 同人誌を5冊書いていく経験の中で慣れてきたので、自分がスクリーンショットを撮る時に使っている方法を紹介します。 > C

chrome
event

技書博で「SlackApps開発ガイド」を頒布します

7/27に大田区産業プラザPiOで行われる技術書同人誌博覧会(技書博)に「つのぶえ出版」としてサークル参加します。 今まで「つのぶえ出版」としてはGatsbyとNetlifyの本を4冊だしていまし

event

Ginza.jsでNext.jsをNetlifyで配信するLTをしてきた

2019/5/22にPlaidさんのオフィスで行われたGinza.js #1にLT枠で参加してきました。 前から、Plaidさんの会場は一面芝というのをTwitterで観測しており、今回初めてお邪魔

ltnetlifyreactnextjs