gatsby-starter-blogでブログを作っていたとき、GraphQLのコード内で「useStaticQuery」というのが出てきて「何コレ？」となったので調べてみました。
useStaticQueryとは？
useStaticQueryは「どのコンポーネントでも」GraphQLを介してデータを取得できるものです。
「どのコンポーネントでも」という部分が大事です。
通常の書き方（page query）
普通にデータを取得する場合ってこんな感じで書くと思います。
import React from 'react'
import { graphql } from 'gatsby'
const Index = ({ data }) => {
return (
<div>
{data.site.siteMetadata.title}
</div>
)
}
export const query = graphql`
query {
site {
siteMetadata {
title
}
}
}
`
export default Indexよく見かけるこの書き方は「page query」と呼ばれています。
page queryは「そのままページになるコンポーネントでのみ」使用できます。Gatsbyで言えばindex.jsや404.jsです。pages/ディレクトリにあるファイルと思えばok。
またpage queryはコンポーネントの外に書いて、{ data }という形でコンポーネントに渡します。
console.log()するとわかりますが、GraphQLで取得したデータは{ "data": {...} }という構造になっているので、分割代入してdataという名前で渡すのが定番なのでしょう。
const Index = ({ data }) => {}みたいな書き方がよくわからないという人は以下の記事を読んでみてください。関数コンポーネントのpropsを分割代入で渡す形です。
＞＞【React】関数コンポーネントの引数（props）は分割代入で渡すとわかりやすい
useStaticQueryの書き方
useStaticQueryはこんな感じで書きます。
import React from 'react'
// ↓useStaticQieryをインポート
import { useStaticQuery, graphql } from 'gatsby'
const Header = () => {
// ↓usestaticQueryでデータを取得
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
}
}
}
`
)
return (
<header>
<h1>{site.siteMetadata.title}</h1>
</header>
)
}
export default Headerヘッダーやフッターはそれ自体がページになるコンポーネントではないのでpage queryではデータを取得できません。なので単純にサイトの一部分を表示するコンポーネントではuseStaticQueryを使用する必要があるというわけです。
gatsby-starter-blogなどを使った人は/src/components/layout.jsやseo.jsにuseStaticQueryを使った記述があるはずです。
useStaticQueryの書き方はシンプルで、page queryの書き方をそのままuseStaticQuery()で囲むだけです。中の書き方は同じです。
また、page queryはコンポーネントの外に書いていましたが、useStaticQueryはコンポーネントの中に書きます。
こちらもconsole.log()すると{ "site": {...} }という構造になっているのでconst { site }と分割代入で定義するのが定番なのだと思います。
他にもpage queryは変数を定義できるがuseStaticQueryはできないなど、いくつか違いがあるみたいですがこの辺は正直よくわかりませんでした。理解しないといけない時が来るまでは放置で大丈夫でしょう。
公式ドキュメントで解説がされているので一応リンクを貼っておきます。
＞＞Querying Data in Components with the useStaticQuery Hook | Gatsby
StaticQueryというのもある
useStaticQueryとよく似たもので「StaticQuery」というのもあります。
以前はStaticQueryを使っていましたが、React hooksの登場によってより簡潔なコードで同じことができる様になりました。それがuseStaticQueryです。
なので基本的に使うのはuseStaticQueryになると思います。「へーこんなのもあるんだ」程度で全然大丈夫でしょう。
一応StaticQueryの公式ドキュメントの解説があるので気になる人はどうぞ。
＞＞Querying Data in Components using StaticQuery | Gatsby
まとめ
GatsbyやGraphQLを知らないとこの辺りはちょっとつまづきポイントですね。
ページにならないただの純粋なコンポーネントなのにpage queryで書いてエラーを出して「なんで！？」みたいにやっていたので意外にハマってしまうかもしれません。
公式ドキュメントや公式スターター、解説記事など色々ググりながらやっていくのが良さそうです。
