GatsbyのuseStaticQueryとは？

2020年05月19日

useStaticQueryは GraphQL クエリを受け取って、データを返す hook です。

StaticQuery と useStaticQuery の違い

React Hooks の登場によってuseStaticQueryが実装されるまでは、
StaticQueryコンポーネントでレンダープロップスを使ってデータを取得することが出来ました。

StaticQueryを使う場合と、useStaticQueryを使う場合の違いを見てみましょう。

StaticQuryを使う場合

import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
const Header = () => {
  return (
    <StaticQuery
      query={graphql`
        query {
          site {
            siteMetadata {
              title
            }
          }
        }
      `}
      render={data => (
        <header>
          <h1>{data.site.siteMetadata.title}</h1>
        </header>
      )}
    />
  );
};
export default Header;

useStaticQueryを使う場合

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
const Header = () => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  );
  return (
    <header>
      <h1>{site.siteMetadata.title}</h1>
    </header>
  );
};
export default Header;

😄

階層も浅くなってシンプルですね！

useStaticQuery とは？

🤔

そもそもuseStaticQueryってどんなときに使うの？

StaticQuery、あるいはそれを hook で扱えるuseStaticQueryは、
あらゆるコンポーネントで GraphQL クエリを介してデータを取得することができます。

それに対し、ページコンポーネントでしか使うことのできないpage query があります。
（ページコンポーネントは特定の URL に対応するコンポーネントです）

ページコンポーネントでのみ使えるqueryとは？

例えばページコンポーネントで以下のように、
graphqlタグ付きテンプレートリテラルを定数に代入し export します。
すると、ページコンポーネントはdataというpropsでGraphQLクエリの結果を得ることができます。

src/pages/index.jsx

import React from 'react'
import { graphql } from 'gatsby'
const TopPage = ({ data }) => (
  <div>
    {data.site.siteMetadata.title}
  </div>
)
export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`;
export default TopPage;

page query とStaticQuery、useStaticQueryの違いは、
StaticQuery、useStaticQueryがあらゆるコンポーネントで使えるのに対し、page queryはページコンポーネントのみで使える。
というほかに、
page queryはクエリに変数を使うことができるというメリットがあります。

岡本侑貴@筋肉ﾁｮｯﾄﾃﾞｷﾙ

筋肉バカ。筋トレしてコード書いて、毎日幸せに生きてる。ボディビルにドハマリ。2021年東京オープンボディビル選手権で最高の身体に仕上げてつよつよエンジニアになる！！