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