I have a setup a Dynamic Zone called Content, the idea being I can add the Dynamic Zone to any pages I create in the future. I’m struggling though to work out the best way to query the data using Gatsby and the gatsby-source-strapi plugin.
I currently have 2 components added to the Dynamic Zone, and in my head, it should be simple to query each component individually and map over them but it doesn’t seem to work as I would expect.
This the graphql I see in from Gatsby…
this is the graphql from Strapi… http://143.110.163.87/graphql
and this is my query/code
export default function Home() {
const [mainContent, setMainContent] = useState([])
const data = useStaticQuery(query);
const bannerContent = data.strapiHome.banner;
const content = data.strapiHome.content;
const bannerText = bannerContent.bannerText;
const bannerButtonText = bannerContent.buttonText;
const bannerButtonURL = bannerContent.buttonURL;
const image = bannerContent.image.childImageSharp.fluid;
useEffect(() => {
setMainContent(content)
console.log(content)
}, [])
return (
<Layout>
<Banner
bannerText={bannerText}
buttonText={bannerButtonText}
url={bannerButtonURL}
image={image}
/>
{mainContent.map(introContent => (
introContent.intro_content &&
<IntroText
introHeading={introContent.intro_content.heading}
introText={introContent.intro_content.text}
key={introContent.intro_content.id}
/>
))}
{mainContent.map(servicesContent => (
servicesContent.services_content &&
<ServiceCards
servicesHeading={servicesContent.services_content.heading}
/>
))}
</Layout>
)
}
const query = graphql`
query {
strapiHome {
banner {
bannerText
buttonText
buttonURL
image {
childImageSharp {
fluid(maxWidth: 1800) {
...GatsbyImageSharpFluid
}
}
}
},
content {
__typename
... on StrapiHomeContent {
intro_content {
id
heading
text
}
}
__typename
... on StrapiHomeContent {
services_content {
id
heading
text
}
}
}
}
}
`
I seem to access intro_content ok but services_content (the second component in the Dynamic zone) is what I’m struggling to query. I hope someone can provide some direction on querying Strapi Dynamic Zones using Gatsby and the strapi-source plugin