【GatsbyJS製ブログ】リッチな内部リンクを作る（useStaticQuery使用）

import React from 'react'
import { useStaticQuery, graphql } from "gatsby"
import {getImage, GatsbyImage} from 'gatsby-plugin-image'
import { kebabCase } from 'lodash'
import { createLinkStyle } from '../../components/functions/createconst'
import * as styles from '../../styles/richinternallink.module.scss'

const RichInternalLink = ({slug}) =>{
    const LinkStyle = createLinkStyle()

    const query = useStaticQuery( //①
        graphql`
        query {
            allMdx {
                nodes {
                    slug
                    frontmatter {
                        category1
                        category2
                        title
                        hero {
                            childImageSharp {
                                gatsbyImageData
                            }
                        }
                    }
                }
            }
        }`    
    )

    const nodes = query.allMdx.nodes
    let title
    let image
    let url

    for(let i = 0 ; i < nodes.length; i++){ //②
        if(slug === nodes[i].slug){
            title = nodes[i].frontmatter.title
            image = nodes[i].frontmatter.hero
            const category1 = kebabCase(nodes[i].frontmatter.category1)
            const category2 = kebabCase(nodes[i].frontmatter.category2)
            url = `/${category1}/${category2}/${slug}`
            break
        }    
    }

    return(
        <a href={url} target = "_blank" rel="noopener norefferer" style={LinkStyle}> //③
            <div className = {styles.richinternallinkwrapper}>
                <div className={styles.flexwrapper}>
                    <GatsbyImage className = {styles.imagestyle}
                        alt = "thumbnailimg" 
                        image = {getImage(image)}
                        width = {200}
                    />
                    <div>{title}</div>
                </div>
            </div>
        </a>

    )
}

export default RichInternalLink

@use "import";

.richinternallinkwrapper{
    margin-top: 30px;
    margin-left: 50px;
    margin-bottom: 30px;
    padding: 30px;
    max-width: 800px;
    position: relative; //①
    border: solid 4px gray;
    transition: 0.5s; //②
    &::before{
        content: "✔︎あわせて読みたい";
        font-size: 1rem;
        color: gray;
        padding: 0 10px;
        background-color: white;
        position: absolute; //①
        top: -15px; //①
        left: 20px; //①
    }
    &:hover{
        box-shadow: 5px 5px 4px rgba(0,0,0,0.3); //②
    }
    .flexwrapper{
        display: flex;
        .imagestyle{
            width: 150px;
        }    
    }
}