Gatsby microCMS Plus

About

useStaticQueryでGraphQL Fragmentsを保存

2022年10月31日

GatsbyではuseStaticQueryという機能を使ってGraphQLクエリのデータの再利用が可能。siteMetadataの取得に使用するのが一般的だが、GraphQL Fragmentsを保存することもできる。
例えば src/utils/fragment.tsx というファイルを作成し、以下のようなGraphQL Fragmentsを記載する。

import { graphql, useStaticQuery } from 'gatsby';

export default function useFragments() {
  useStaticQuery(graphql`
    fragment MicrocmsBlogsList on MicrocmsBlogs {
      slug
      title
      excerpt(length: 80)
      publishedAt(formatString: "YYYY年MM月DD日")
      featuredImg {
        childImageSharp {
          gatsbyImageData(width: 320)
        }
      }
    }
  `);
}

これで他のページ内クエリで MicrocmsBlogsList というGraphQL Fragmentsを使用することができる。
src傘下の StaticQuery は自動的に実行されるため他のページやコンポーネントから src/utils/fragment.tsx を読む必要はない。

トップページへ
Gatsby microCMS Plus

© 2023 cieloazul310 All rights reserved.

Built with Gatsby