Gatsbyドキュメント Doc -> Recipes ざっくりまとめ

公式ドキュメント

Gatsby Doc -> Recipes
https://www.gatsbyjs.org/docs/recipes/

1.ページとレイアウト

プロジェクト構造

フォルダ構造と、gatsby-xxx.js ファイルの説明。
|— /.cache
|— /plugins
|— /public
|— /src
|— /pages
|— /templates
|— html.js
|— /static
|— gatsby-config.js
|— gatsby-node.js
|— gatsby-ssr.js
|— gatsby-browser.js

gatsby-config.js
開発する際によく触る。おもにプラグインの設定、サイトのメタデータやタイトル等の設定で使う。

gatsby-node.js
ビルドプロセス（静的サイトを作成する = public/のファイルを作り出す)の処理が書かれる場所。
つまり、$ gatsby build コマンドを叩いたときに、走る処理。　
例）onCreatePages() で、Markdownファイルから記事ページを作成する処理
ビルドする際の処理を、いじいじできるよう Gatsby Node API として提供していますとのこと。
リファレンス
https://www.gatsbyjs.org/docs/node-apis/
https://www.gatsbyjs.org/docs/node-api-helpers/

gatsby-ssr.js
ServerSideRendering関連の処理をフックする場所。
Gatsby Browser API として、提供されている。
リファレンス
https://www.gatsbyjs.org/docs/ssr-apis/

gatsby-browser.js webブラウザで表示される際の処理が書かれる場所。
例）onClientEntry()で、ブラウザへのレンダリングが最初に始まった際の処理がかける。

exports.onClientEntry = () => {
  console.log("We've started!")
  callAnalyticsAPI()
}

Gatsby Browser API として、提供されている。
リファレンス
https://www.gatsbyjs.org/docs/browser-apis/

ページを自動的に作成する

src/pages に配置されているReactComponentをページとして自動的に作成する
例）
src/pages/index.js　→　localhost:8000/
src/pages/about.js　→　localhost:8000/about
のようにurlが対応する。

ページ間のリンク

Linkコンポーネントを使う。
詳細なリファレンス
https://www.gatsbyjs.org/docs/gatsby-link/

createPageを使用してページを作成する

GatsbyのcreatePagesAPIで、様々なデータソース（Markdownや、Wordpressなど）から、ページ作成ができる。
実装サンプルは、Markdownファイルからブログ記事ページを作成する方法。
（概要： Markdownファイル → markdown->データ のプラグインを設定 → 記事ファイルのjsファイル作成（GraphQLでデータ取得して使う） 流れ）
TODO: 長くなるので、別途まとめたい。

GraphQLを使用せずにデータからページを作成する

データソースに、外部APIを使用してサイトページを作成する方法の解説。
例）PokéAPIのRESTエンドポイント を使って、ページ作成
（概要：外部APIでデータ取得 → createPageAPIでページ作成 → ページ用のtemplateファイルを作成）
TODO: 長くなるので、別途まとめたい。

レイアウトコンポーネントの作成

Layoutコンポーネントの簡単な使い方説明

2. CSSによるスタイリング

スタイル付きコンポーネントの使用

jsxファイルに直接スタイルの実装（CSSファイルに書いていた装飾実装）をかけるようにする方法説明
プラグインの gatsby-plugin-styled-components を使う。

ローカルフォントの追加

プロジェクトにフォントファイルを追加して、cssで適用する方法の説明

Googleフォントの使用

Googleフォントを設定する方法の数ある中で一例を紹介。

3.スターターの使用

スターターを使用する

Gatsby Starterを使ってプロジェクト作成する方法説明

4.テーマの使用

テーマスターターを使用して新しいサイトを作成する

サイト作成方法は、スターターと変わらない。
「スターター」と「テーマ」の違いについての理解が大事そう。
「スターター」は、gatasby new xxx で、作成した後は、もとのスターターとの関係性は切れる。
「テーマ」は、gatasby new xxx で、作成した後も、関係性が持続する。
例えば、もとの「テーマ」になにか変更があった場合、その変更を自分のプロジェクトに取り込んで更新することが可能らしい。

新しいテーマの構築

gatsby-starter-theme-workspace を使ってテーマ構築する方法

5.データの調達

ソースノードの作成

データソースを取得（作成）する方法説明。
プラグインを用いることで、markdownやwordPressからデータ取得できる。
gatsby-node.jsのAPIを使って、データを自作する実装の説明をしている。

6.データのクエリ

ページクエリの使用

graphqlでクエリ書けば、データをページで使えるよ、という説明。

Netlifyへのデプロイ

Gatsbyコマンドを使って、ターミナルからNetlifyにデプロイする方法の説明

データのクエリ

jsxファイルで、graphQLクエリ書いてデータをページに表示する実装のサンプル

StaticQueryコンポーネント

前のGatsbyのversionでは、ページのコンポーネント（ヘッダー、メニュー、フッターとか）以外では、GraphQLでデータ取得はできない仕様だった。
そのため、データ取得する方法を工夫する必要があった。
そこで、ページ以外のコンポーネントでもGraphQLが使えるような機能として、

StaticQueryコンポーネントが登場した。

使い方: <StaticQuery query部分、render部分 >

import React from "react"
import { StaticQuery, graphql } from "gatsby"

const NonPageComponent = () => (
<StaticQuery query={graphql'
   // ここにクエリーを書く
   query HogeQuery{
      site {
         title
      }
   }
'}
 render={(
    data
 } => (
   // ここにデータ使ったタグを書いていく
   <h1>
      {data.site.title}
   </h1>
    )}
/>
)

useStaticQueryフックを使用したデータのクエリ

StaticQueryがより使いやすく（書きやすく）なったものという認識。
（※Gatsby v2.1.0以降のみ対応）

StaticQuery は、コンポーネントだったが、
useStaticQuery は、graphQLのクエリ書いてデータ取得するメソッドという感じ。

query書いて、返却値を変数に格納してファイル内で自由に使える。
先程の内容は、いかのように簡潔に書ける。

以下サンプル

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const NonPageComponent = () => {
  const data = useStaticQuery(graphql`
    query NonPageQuery {
      site {
          title
      }
    }
  `)

  return (
    <h1>
      {data.site.title}
    </h1>
  )
}

GraphQLによる制限

クエリに、取得数の制限のLimit引数を追加して、数を制限する書き方の説明

{
  allSitePage {
  を
  allSitePage(limit: 3) {

とすればOK。

GraphQLでの並べ替え

クエリに、ソート引数を追加して、並び順を指定する書き方の説明

{
  allSitePage {
  を
  allSitePage(sort: {fields: path, order: ASC}) {

とすればOK.

GraphQLを使用したフィルタリング

クエリに、filter引数を追加して、==や!=と同様のフィルタ条件をつける書き方

 {
   allMarkdownRemark {
     edges {
       node {
         frontmatter {
           title
           categories
         }
   を
   {
     allMarkdownRemark(filter: {frontmatter: {categories: {eq: "magical creatures"}}}) {
       edges {
         node {
           frontmatter {
             title
             categories
           }

とすればOK.

GraphQLクエリエイリアス

同じ項目を指定する際に、名前の衝突をエイリアスを使うことで回避させる書き方の説明

{
  allFile {
    totalCount
  }
  allFile {
    pageInfo {
      currentPage
    }
  }
}
を
{
  fileCount: allFile {
    totalCount
  }
  filePageInfo: allFile {
    pageInfo {
      currentPage
    }
  }
}

にする。

GraphQLクエリフラグメント

クエリのテンプレートというかエイリアスのようなもの。

まず、フラグメントを定義する。

export const query = graphql`
  fragment SiteInformation on Site {
    title
    description
  }

定義したフラグメントを使う（差分表記： - は削除、+ は追加）

// フラグメントを使う前
export const pageQuery = graphql`
  query SiteQuery {
    site {
      title
      description
    }
  }
 

// フラグメントで書き換えた状態

export const pageQuery = graphql`
  query SiteQuery {
    site {
       SiteInformation
    }
  }

7.画像の使用

webpackを使用して画像をコンポーネントにインポートする

プロジェクト内に格納したjpgファイルを、コンポーネントを使って画面表示する方法の説明

静的フォルダーから画像を参照する

staticフォルダーに格納した画像を使用する方法の説明

gatsby-imageを使用したローカル画像の最適化とクエリ

画像プラグインの gatsby-image を使って、ローカル画像を表示する方法の説明。

gatsby-imageを使用した記事のフロントマターの画像の最適化とクエリ

ブログ記事ページに、ページ用のメイン画像を追加して、表示する方法（Markdownで記事作成する場合の例）
（ここで言っているフロントマターとは、 記事のメタ情報（タイトル、作成日、メイン画像）のような目次情報を意味している）

ローカル画像の例との違いは、以下のような追加実装がある

• Markdownファイルに、メイン画像用の項目を定義
• メイン画像用のpathを取得するGraphQLクエリを追加
• ページ作成時( onCreatePages() )に、メイン画像のpathをページに渡す処理を追加

8.データの変換

データ変換系のプラグインを使ってみるサンプル（Markdownファイルをデータ元にしたサンプル）
プラグイン gatsby-transformer-remark を使う。
データ定義を確認する方法（（http://localhost:8000/___graphql にアクセス）

9.サイトの展開

展開の準備

gatsby buildコマンドの説明

最後に

Gatsbyの表層の仕組み・機能の理解がちょっと進んだ。
SQLで条件してデータ取得したい場合のGraphQLのサンプルがあってよかったのと、StaticQueryについて知れたのがよかったかなと。
GatsbyのDocumentがかなり充実していて、他にも読み応えがあるDocがまだまだあるので、読み込んでいきたい所存。