useStaticQueryでカスタムhooksを作る

microCMSにカテゴリAPIを追加します。

https://i.gyazo.com/07b126e3beb1b9af0c03648d14733b13.png

https://i.gyazo.com/83c44da4f8ecacce0603f2dd56e71ef3.png

カテゴリにデータをついかします。

コンテンツIDとカテゴリ名を紐付けてください。

https://i.gyazo.com/969791fd9fc95ac637c9cdb21e9b2e85.png

ブログのスキーマにカテゴリを追加します。

種類はコンテンツ参照でカテゴリを選択してください。

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

ブログのデータにカテゴリを追加します

https://i.gyazo.com/76e1896890bb54be6597c7adf7f17cb7.png

GraphQLサーバーからデータ取得

https://i.gyazo.com/5abcab08f82afc4abe74342595bf54d5.png

カスタムhookを作成

useStaticQueryを使うことでカスタムhookを作ることができます。

useStaticQueryは1つのファイルに1つまでです(多分)

code:useMellowContents.tsx

import * as React from "react";

import {graphql, useStaticQuery} from "gatsby";

export const useMellowContents = () => {

const { mellows } = useStaticQuery<GatsbyTypes.useMellowQuery>(graphql`

query useMellow {

mellows: allMicrocmsBlogs(filter: {category: {id: {eq: "mellow"}}}) {

edges {

node {

title

id

blogsId

category {

title

id

}

thumbnail {

url

}

}

}

}

}

`)

return mellows.edges

}

code:useRecommendContents.tsx

import * as React from "react";

import {graphql, useStaticQuery} from "gatsby";

export const useRecommendContents = () => {

const { recommends } = useStaticQuery<GatsbyTypes.useRecommendQuery>(graphql`

query useRecommend {

recommends: allMicrocmsBlogs(filter: {category: {id: {eq: "recommend"}}}) {

edges {

node {

title

id

blogsId

category {

title

id

}

thumbnail {

url

}

}

}

}

}

`)

return recommends.edges

}

code:index.tsx

import * as React from "react"

import {StaticImage} from "gatsby-plugin-image";

import { Card } from "../components/Card";

import {css} from "@emotion/react";

import { useMellowContents } from "../hooks/useMellowContents";

import { useRecommendContents } from "../hooks/useRecommendContents";

const container = css`

max-width: 900px;

margin: 0 auto;

`

const grid = css`

display: grid;

grid-template-columns: repeat(3, minmax(0, 1fr));

gap: 40px;

`

const IndexPage = () => {

const mellows = useMellowContents()

const recommends = useRecommendContents()

return (

<main css={container}>

<p>hello gatsby</p>

<StaticImage

src={"../images/hacktyu.png"}

alt={"hacktyu"}

width={100}

height={100}

/>

<h2>しっとり</h2>

<ul css={grid}>

{mellows.map(({ node }) => (

<li key={node.blogsId}>

<Card

title={node?.title ?? ""}

src={node?.thumbnail?.url ?? ""}

to={node.blogsId ?? "/"}

/>

</li>

))}

</ul>

<h2>おすすめ</h2>

<ul css={grid}>

{recommends.map(({ node }) => (

<li key={node.blogsId}>

<Card

title={node?.title ?? ""}

src={node?.thumbnail?.url ?? ""}

to={node.blogsId ?? "/"}

/>

</li>

))}

</ul>

</main>

)

}

export default IndexPage

https://i.gyazo.com/30bb833ce87c73412d2587863480c36d.jpg