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

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.