Hi,
Hoping someone can point me in the right direction. I have the following GraphQL query:
query MyQuery {
strapi {
menu(id: 2) {
data {
attributes {
menu_title
menu_items {
... on STRAPI_ComponentServicesItems {
service {
data {
attributes {
title
slug
}
}
}
}
... on STRAPI_ComponentPagesItems {
page {
data {
attributes {
title
slug
}
}
}
}
}
}
}
}
}
}
which gives me the following result:
{
"data": {
"strapi": {
"menu": {
"data": {
"attributes": {
"menu_title": "Services",
"menu_items": [
{
"service": {
"data": {
"attributes": {
"title": "Domestic Electrical Services",
"slug": "domestic-electrical-services"
}
}
}
},
{
"service": {
"data": {
"attributes": {
"title": "Commercial Electrical Services",
"slug": "commercial-electrical-services"
}
}
}
},
{
"page": {
"data": {
"attributes": {
"title": "Rates",
"slug": "rates"
}
}
}
}
]
}
}
}
}
},
"extensions": {}
}
How do I go about displaying the data (title/slug) from those components in a list? What I have got so far is:
{
data.strapi.menus.data.map((menus) => (
<>
<h5>{menus.attributes.menu_title}</h5>
<ul className={'nav flex-column'}>
{menus.attributes.menu_items.map((item) => (
<li className={'nav-item mb-2'}>
<Nav.Link
className={'p-0'}
href={ -- this is where I need the slug -- }
> { -- this is where I need the title -- }
</Nav.Link>
</li>
) ) }
</ul>
</>
))
}
Regards
Chris