How do I populate media in this "complex" structure?

Questions and Answers
1
System Information
  • Strapi Version: 4.20.0

The current query (that it’s not working at all, because it’s not showing the media from “sections.carrousel”):

const pageObject = await fetchApi<Page[]>({
	endpoint: "pages",
	query: {
		populate: {
			metadata: {
				populate: "*",
			},
			sections: {
				populate: "*",
				on: {
					"sections.carrousel": {
						populate: "*",
					},
				},
			},
		},
	},
	wrappedByKey: "data",
});

The current response:

const result = {
  page: {
    id: 2,
    attributes: {
      createdAt: '2024-02-16T11:47:19.818Z',
      updatedAt: '2024-02-16T15:32:00.210Z',
      url: '/',
      metadata: {
        id: 2,
        title: 'Title',
        canonicalTag: null,
        description:
          'Desc',
        ogImage: { data: null }
      },
      sections: {
        data: [
          {
            id: 1,
            attributes: {
              createdAt: '2024-02-16T14:30:07.372Z',
              updatedAt: '2024-02-16T15:54:31.903Z',
              page_component: 'index_Hero',
              content: [
                {
                  id: 3,
                  __component: 'sections.hero',
                  header:
                    'Header',
                  subheader:
                    'SubHeader'
                },
                {
                  id: 1,
                  __component: 'sections.carrousel'
                }
              ]
            }
          },
          {
            id: 3,
            attributes: {
              createdAt: '2024-02-16T15:31:34.529Z',
              updatedAt: '2024-02-16T15:31:34.529Z',
              page_component: 'index_Test2',
              content: [
                {
                  id: 5,
                  __component: 'sections.hero',
                  header: 'testg',
                  subheader: 'sfgsfg'
                }
              ]
            }
          }
        ]
      }
    }
  }
};

sections is a collection, which has a dynamic zone with a component named “Carrousel” with a image gallery itself, and pages is a collection that has a relationship with sections. Basically I’m fetching a section from a page.

Thank you in advance for the help.

Regards.

2

After several tests, I’ve found the solution by myself:

const pageObject = await fetchApi<Page[]>({
	endpoint: "pages",
	query: {
		populate: {
			metadata: {
				populate: "*",
			},
			sections: {
				populate: {
					content: {
						populate: "*",
					},
				},
			},
		},
	},
	wrappedByKey: "data",
});