MicroCMSとの連携

# サービスを作ります

https://i.gyazo.com/ece365e840e7a66c9fa8ce30025354d2.png

# APIを作ります

https://i.gyazo.com/39096ee22e4750f70bdb155a9b8141b0.png

https://i.gyazo.com/10e5178bc4649fe43da54cb4d78197fa.png

https://i.gyazo.com/7781fec645c2c7415379872e66666d01.png

# データを作ります

https://i.gyazo.com/ef55e48cf88b6506a78cbcb16aaa3dc3.png

重要！！

コンテンツIDから記号を削除しておいてください

gatsbyのファイル名にidが使えないためです (個別ページの生成時に関わってきます)

追記

英語大文字も指定を外してください

https://i.gyazo.com/ee1f5d02d6ac742f5bbc93758e381c6b.png

# プラグインの導入

yarn add gatsby-source-microcms

# プラグインの設定

追記してください。

apiKeyは権限管理タブからコピー

serviceIdはxxx.microcms.ioのxxxの部分

endpointはAPI名です

code:gatsby-plugin.js

{

resolve: 'gatsby-source-microcms',

options: {

apiKey: 'API_KEY',

serviceId: 'keisukesan',

apis: [

{

endpoint: 'blogs',

},

],

},

},

# GraphQLサーバーで確認

https://i.gyazo.com/1d90ecbe0841b6056a37d05aab3dbdd1.png

# サイトに表示

型が効いてるのでめっちゃ書きやすいですねっ

code:index.tsx

import * as React from "react"

import {graphql, PageProps} from "gatsby";

// markup

const IndexPage = ({ data }: PageProps<GatsbyTypes.TopPageQuery>) => {

return (

<main>

<p>hello gatsby</p>

<ul>

{data.allMicrocmsBlogs.edges.map(({ node }) => (

<li key={node.id}>

{node?.title && <p>{node.title}</p>}

{node?.body && <p dangerouslySetInnerHTML={{ __html: node.body }} />}

</li>

))}

</ul>

</main>

)

}

export const query = graphql`

query TopPage {

allMicrocmsBlogs {

edges {

node {

title

body

blogsId

}

}

}

}

`

export default IndexPage

https://i.gyazo.com/b1733200584ba5627c7b5e0d91c213ef.png