Gatsbyとの連携
最終更新日:2023年11月28日
Gatsbyとは
GatsbyはReact製の静的サイトジェネレーターです。
GraphQLを用いて必要なデータを取得し、Reactコンポーネントに渡すことができるのが特徴です。
詳しくはGatsbyの公式ドキュメントをご覧ください。
![](https://images.ctfassets.net/vkdbses00qqt/38yAjXH9hRko9noPZWrluI/4d1988b4b07acfab9ce93a87407930bd/Frame_3__2_.png)
- The Best React-Based Framework | Gatsby
- https://www.gatsbyjs.com/
プラグイン
GatsbyではGraphQLを利用して、ページ生成に必要となるデータを取得します。
microCMSでは、REST APIを用いたデータ取得を行うため、そのままでは組み合わせて利用することができません。
Gatsby向けに用意しているプラグイン「gatsby-source-microcms」を利用することによって、事前にmicroCMSから全コンテンツを取得し、Gatsbyに備わっている仕組みによって、GraphQLを通して必要なコンテンツを取り出すことが可能になります。
「gatsby-source-microcms」は、npmパッケージとして配布されています。
![](https://static-production.npmjs.com/338e4905a2684ca96e08c7780fc68412.png)
- gatsby-source-microcms
- https://www.npmjs.com/package/gatsby-source-microcms
また、ソースコードはオープンソースとなっており、どなたでもIssueやPull Requestの作成が可能です。
- GitHub - microcmsio/gatsby-source-microcms: :memo: Source plugin for Gatsby from microCMS.
- https://github.com/microcmsio/gatsby-source-microcms
こちらのプラグインは、Gatsbyの公式サイトにも掲載されています。
![](https://www.gatsbyjs.com/og-image.png)
- gatsby-source-microcms | Gatsby
- https://www.gatsbyjs.com/plugins/gatsby-source-microcms/