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 を読む必要はない。