Issues populating data using gatsby-source-strapi plugin

[SolivanLau]

Hi there folks,

I have been trying to set up a gatsby-strapi project and have been struggling to query deep nested data using graphql and gatsby's data layer. I am unable to populate data when a dynamic zone has components with images or sub components.

I am using Strapi V4 and Gatsby v5

Example: In strapi i have a single type for a webpage with a dynamic zone.

Inside the dynamic zone i have 2 components to choose from

1. a text link
2. an image link

Both components are made up of sub components for a basic link (label, href, isExternalLink) and a basic image (media, altText).

When i add content in Strapi CMS and run Gatsby Develop, I can query all data except for components inside the dynamic zone. Specifically, nested components and images inside a dynamic zone component. i only get strapi-component and id nodes...

I have defined all deep queries in my gatsby-config that gatsby needs to populate from strapi: doc notes here.

const connectPage = {
	singularName: "connect-page",
	queryParams: {
		populate: {
			content: {
				populate: {
					textLink: {
						populate: {
							linkInfo: "*",
						},
					},
					imageLink: {
						populate: {
							linkInfo: "*",
							imageInfo: "*",
						},
					},
				},
			},
		},
	},
};
// exporting to gatsby-config file
export const single = [siteInformation, navigation, footer, connectPage];

I have checked the max query depth in my strapi app beyond the default 7 layers. In Strapi's graphql playgound i am able to produce the data i need:

Does anyone know what the exact issue is and how best to solve this? i have read on some quirks using dynamic zones and sub components with gatsby-strapi-source plugin and Gatsby's data layer but have found nothing to resolve this. I am fairly new to the CMS and GraphQL realm - any help is appreciated!