GatsbyJS Tips
#gatsby #graphql #react #javascript
StaticQuery
React Component上でGraphQLを使ってデータの取得が可能
ビルド時に評価される (ブラウザ上で実行されるわけではない)
外部 (= Gatsbyが管理しているGraphQL Node以外) への接続は不可能
接続したいデータソースに対応したプラグインを導入して設定する
gatsby-node.jsのsourceNodes()で自前でNodeを生成してGraphQLでアクセスできるようにする
pages/ 配下のComponentはStaticQueryを使わずにGraphQLを利用できる
MySQLから取得したレコードの親子関係
gatsby-source-mysqlの話
他テーブルとのJOINは上記プラグインの機能で可能だが、同じテーブル内でツリー構造つくる、みたいなのはできない
gatsby-node.jsのonCreateNode()で生成されたNodeを捕まえて親子の紐付けをする
childrenやparentを直接更新しても意味がなくcreateParentChildLink()を呼ぶ必要がある
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
gatsby/gatsby #5183 にあるような問題
react-responsiveなどブラウザ依存のライブラリは gatsby build 後に動かなくなる
gatsby develop のときは動くので開発中に気づくのは結構むずい
Gatsbyの処理内でSSRされたものがビルド結果として配置されるので完全に静的
hydrationしないならSSRに対応したライブラリのみを使用する必要がある
rehydrateしたいなら自分でしてねというスタンス
styled-components
使うときにはこのプラグインが必要
開発モード
PCのネット接続が切れると強制終了 (なんのために通信しているのかは調べてない)
PC持ってでかけたりするたびに起動しないといけないので地味に面倒
動的にページを生成する
gatsby-node.jsでcreatePages()を利用するとできる
テンプレートになるファイルが必要なので事前に用意しておく
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-plugin-google-tagmanagerの話
通常、SPAだとPV計測する際に画面遷移時に自前で呼び出す必要がある
画面遷移時に gatsby-router-change というイベントを発火してくれる
コードを書かなくても画面遷移時にタグを配信することが可能
https://gyazo.com/dbb1deaf3e5365b34bfae2f697fc7a74
所感など
複雑なことをしないのであればほとんど何もいじらずにビルドしてS3とかに置く、だけで動く
ただReactでComponent書いて静的なページ作るだけ。の意
GraphQLが標準で利用可能 & GraphQLサーバーが不要なのでDBなどからのデータ取得もすぐできる
静的ページを生成するだけのためにGraphQLサーバー用意するのは面倒だし、そういう意味ではGatsbyはとても良い
Gatsby特有のお作法が多すぎる
Configまわりやプラグイン関連は組み込む時間よりもドキュメント読む時間の方が長い
= 覚えてしまえばサクサクっとできる
やりながらこれ何?ベースで調べる方がいいかも、やること自体はシンプルなのでそんなに手戻りしない
公式ドキュメントが難しい
ほぼすべての機能がプラグイン化されているのもあり、プラグイン同士の連携みたいなところは調べるの大変
サンプルがあんまり実用的じゃなかったりするので同じような質問してるIssueやStack Overflow見に行くほうが良い
= ドキュメントだけ読んで解決した!はあんまなかった
参考リンク
Docs | GatsbyJS
GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ