🤭

【Gatsby】コンポーネントでgraphqlを使おうとした時にエラーが出たときの対処法

2 min read

indexではないコンポーネントで初めてgraphqlを使いたい時に、クエリを書いてもindexと同じ記述でデータを取得することができず、1時間くらいハマってしまいました。

上記のスクリーンショットを見ていただけるとお分かりいただけると思うのですが、

  • indexの時と同じようにWorksの外にgraphqlを書いたけど、どうやって持ってくるの?
  • indexの時はなんかpropしてたけど、コンポーネント呼ぶ時は何もpropしてないし、このpropは多分無意味なんだろうなぁ…

という疑問点を抱きながらグルグルしてました。

解決方法→useStaticQueryを使う

結論としましては、useStaticQueryを用いてgraphqlを実行すれば、コンポーネントでもuseStaticQueryを使えるようになりました。

import * as React from "react";
// ↓ここに追加
import { useStaticQuery, graphql, Link } from "gatsby";
import "../../css/index.css";
import WorksCord from "./WorksCard";

const Works = () => {
    // graphqlをここに書く
    const data = useStaticQuery(
        graphql`
            query {
                allMicrocmsWorks {
                    nodes {
                        description
                        slug
                        title
                        thumbnail {
                            url
                        }
                    }
                }
            }  
        `
    )
    return (
        <section className="bg-yellow-300 py-40">
            <h2 className="midashi mb-2">WORKS</h2>
            <p className="text-base mb-10 text-center">制作物</p>
            <ul>
                { data.allMicrocmsWorks.nodes.map(work => {
                    return <li><WorksCord work={work} /></li>
                })}
            </ul>
        </section>
    )
}


export default Works

なぜコンポーネントでqueryが使えなかったのか?

冒頭で私が、「indexの時と同じようにWorksの外にgraphqlを書いたけど、どうやって持ってくるの?」という疑問を抱いたのですが、この「indexとWorks」の違いがqueryが使えなかった原因です。

page queryしか知らなかったから

indexでqueryを書く時、下記のような書き方で書くと思います。

import * as React from 'react'
import { graphql } from 'gatsby'

const HomePage = ({data}) => {
  return (
    <div>
     {data.site.siteMetadata.description}
    </div>
  )
}

export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        description
      }
    }
  }
`

export default HomePage

公式ドキュメントより引用

このような書き方はpage queryと呼ばれます。page queryはpage componentで使用することができます。page componentは、pages/配下にあるような、それ単体でページとなることができるコンポーネントです。

ページコンポーネント = コンポーネント + コンポーネント + …

page component以外でqueryを書く場合

そんなわけで、page component以外のコンポーネントでgraphqlを使いたい場合は、useStaticQueryをimportする必要があります。

TOPページに最新の記事やコンテンツを数記事だけチラ見せしたい…でもindexがqueryで溢れるのはちょっとなぁと思った時に使えます。

useStaticQueryについて色々調べていたら、カスタムuseStaticQueryなるものが使えるみたいなので、他にも色々試してみたいと思います。

参考ページ

公式ドキュメント Querying Data in Components with the useStaticQuery Hook

Discussion

ログインするとコメントできます