以下のコードの categoryS, categoryS2, categoryS3, categoryS4 ... と沢山記述している所をスッキリさせたいのですが、Gatsbyだとどう記述できるのでしょうか?
(CMSはContentfulを使用して、データを取得しています。)
表示イメージ
export const query = graphql`
query() {
bigcate:allContentfulCategory(filter: {navadd: {eq: "add"}}) {
edges {
node {
category
id
categorySlug
blogpost {
title
slug
}
categoryS
categoryS2
categoryS3
categoryS4
}
}
}
all:allContentfulCategory(sort: {fields: blogpost___createdAt, order: ASC}) {
edges {
node {
category
id
categorySlug
blogpost {
id
title
slug
}
categoryS
categoryS2
categoryS3
categoryS4
}
}
}
}
`
.
.
.
{data.bigcate.edges.map(bigcate => (<div className="wrapper">
<div className="bigcate">
<h2 className="bar l"><p><span>about </span><i>{bigcate.node.categorySlug}</i></p><p>{bigcate.node.category}について</p></h2>
<p className="topTitle"><Link to={`/${bigcate.node.categorySlug}/`}>{bigcate.node.category}TOP</Link></p>
<ul>
{bigcate.node.blogpost.map(catlower => (
<li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
{catlower.title}
</Link></li>
))}
</ul>
</div>
<ul className="smallcate">
{data.all.edges.map(allcate => (<>
{bigcate.node.categoryS === allcate.node.categorySlug && (<li key={allcate.node.id}>
<p className="topTitle"><Link to={`/${allcate.node.categorySlug}/`}>{allcate.node.category}TOP</Link></p>
<ul>
{allcate.node.blogpost.map(catlower => (<>
<li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
{catlower.title}
</Link></li>
{allcate.node.categoryS !== `no-category` && (<li>
{data.all.edges.map(categorySlug => (<>
{allcate.node.categoryS === categorySlug.node.categorySlug && (<>
<p className="topTitle"><Link to={`/${allcate.node.categoryS}/`}>
{`${categorySlug.node.category}TOP`}
</Link></p>
<ul>
{categorySlug.node.blogpost.map(catlower => (<>
<li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
{catlower.title}
</Link></li>
</>))}
</ul>
</>)}
</>))}
</li>)}
{allcate.node.categoryS2 !== `no-category` && (<li>
{data.all.edges.map(categorySlug => (<>
{allcate.node.categoryS2 === categorySlug.node.categorySlug && (<>
<p className="topTitle"><Link to={`/${allcate.node.categoryS2}/`}>
{`${categorySlug.node.category}TOP`}
</Link></p>
<ul>
{categorySlug.node.blogpost.map(catlower => (<>
<li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
{catlower.title}
</Link></li>
</>))}
</ul>
</>)}
</>))}
</li>)}
{allcate.node.categoryS3 !== `no-category` && (<li>
{data.all.edges.map(categorySlug => (<>
{allcate.node.categoryS3 === categorySlug.node.categorySlug && (<>
<p className="topTitle"><Link to={`/${allcate.node.categoryS3}/`}>
{`${categorySlug.node.category}TOP`}
</Link></p>
<ul>
{categorySlug.node.blogpost.map(catlower => (<>
<li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
{catlower.title}
</Link></li>
</>))}
</ul>
</>)}
</>))}
</li>)}
{allcate.node.categoryS4 !== `no-category` && (<li>
{data.all.edges.map(categorySlug => (<>
{allcate.node.categoryS4 === categorySlug.node.categorySlug && (<>
<p className="topTitle"><Link to={`/${allcate.node.categoryS4}/`}>
{`${categorySlug.node.category}TOP`}
</Link></p>
<ul>
{categorySlug.node.blogpost.map(catlower => (<>
<li key={catlower.id}><Link to={`/blog/post/${catlower.slug}`}>
{catlower.title}
</Link></li>
</>))}
</ul>
</>)}
</>))}
</li>)}
</>))}
</ul>
</li>)}
{bigcate.node.categoryS2 === allcate.node.categorySlug && (<li key={allcate.node.id}>
.
.
.
</li>)}
{bigcate.node.categoryS3 === allcate.node.categorySlug && (<li key={allcate.node.id}>
.
.
.
</li>)}
{bigcate.node.categoryS4 === allcate.node.categorySlug && (<li key={allcate.node.id}>
.
.
.
</li>)}
</>))}
.
.
.
</div>))}