GatsbyJS Tips
StaticQuery
React Component上でGraphQLを使ってデータの取得が可能
ビルド時に評価される (ブラウザ上で実行されるわけではない)
外部 (= Gatsbyが管理しているGraphQL Node以外) への接続は不可能
接続したいデータソースに対応したプラグインを導入して設定する
MySQLから取得したレコードの親子関係
他テーブルとのJOINは上記プラグインの機能で可能だが、同じテーブル内でツリー構造つくる、みたいなのはできない
gatsby-source-mysqlについての補足
Typeの命名規則はMysql{gatsby-config.jsで定義したnameのアッパーキャメルケース}となる
DBのテーブル上でidという名前をつけたカラムはGatsby上ではmysqlIdとして扱われる
code:gatsby-node.js
// ex. カテゴリーテーブルから取得したレコード同士で親子関係を表現
// node に各種プラグインやsourceNodesで生成されたNodeが格納されている
exports.onCreateNode = ({ actions, getNodesByType, node }) => {
const { createParentChildLink } = actions
const categoryNodes = getNodesByType('MysqlCategories')
// どんなNodeでも生成後に必ず呼ばれるメソッドなので対象は絞る必要がある
if (node.internal.type === 'MysqlCategories') {
categoryNodes
.filter(({ parentCategoryId }) => node.mysqlId === parentCategoryId)
.forEach(childNode => createParentChildLink({ child: childNode, parent: node }))
}
}
SSR, hydration
react-responsiveなどブラウザ依存のライブラリは gatsby build 後に動かなくなる
gatsby develop のときは動くので開発中に気づくのは結構むずい
Gatsbyの処理内でSSRされたものがビルド結果として配置されるので完全に静的
hydrationしないならSSRに対応したライブラリのみを使用する必要がある
styled-components
開発モード
PCのネット接続が切れると強制終了 (なんのために通信しているのかは調べてない)
PC持ってでかけたりするたびに起動しないといけないので地味に面倒
動的にページを生成する
テンプレートになるファイルが必要なので事前に用意しておく
code:gatsby-node.js
const { resolve } = require('path')
exports.createPages = async ({ graphql, actions }) => {
actions.createPage({
resolve('./src/templates/Template.tsx'),
path: '/welcome',
context: {
title: 'welcome',
}
})
}
code:Template.tsx
import React from 'react'
import { ReplaceComponentRendererArgs } from 'gatsby'
type Props = ReplaceComponentRendererArgs'props' & { pageContext: {
title: string
}
}
export default function Template(props: Props) {
// = welcome page!
return <h1>{props.pageContext.title} page!</h1>
}
Google Tag Manager
画面遷移時に gatsby-router-change というイベントを発火してくれる
コードを書かなくても画面遷移時にタグを配信することが可能
https://gyazo.com/dbb1deaf3e5365b34bfae2f697fc7a74
所感など
複雑なことをしないのであればほとんど何もいじらずにビルドしてS3とかに置く、だけで動く
ただReactでComponent書いて静的なページ作るだけ。の意
GraphQLが標準で利用可能 & GraphQLサーバーが不要なのでDBなどからのデータ取得もすぐできる
静的ページを生成するだけのためにGraphQLサーバー用意するのは面倒だし、そういう意味ではGatsbyはとても良い
Gatsby特有のお作法が多すぎる
Configまわりやプラグイン関連は組み込む時間よりもドキュメント読む時間の方が長い
= 覚えてしまえばサクサクっとできる
やりながらこれ何？ベースで調べる方がいいかも、やること自体はシンプルなのでそんなに手戻りしない
公式ドキュメントが難しい
ほぼすべての機能がプラグイン化されているのもあり、プラグイン同士の連携みたいなところは調べるの大変
サンプルがあんまり実用的じゃなかったりするので同じような質問してるIssueやStack Overflow見に行くほうが良い
= ドキュメントだけ読んで解決した！はあんまなかった
参考リンク