The API Response Is Too Nested

I created a single-typed endpoint for my home page. Below is my query. It has some relations to other collections so, I have to populate.

const getHomePageData = async () => {
  const query = qs.stringify(
    {
      fields: ['mainHeading', 'capabilitiesHeading', 'worksHeading'],
      populate: {
        splitHeading: true,
        capabilities: { fields: ['title', 'description'] },
        works: {
          fields: ['name'],
          populate: {
            thumbnail: { fields: ['url'] },
            capabilities: { fields: ['title'] },
            work_tags: { fields: ['label'] },
          },
        },
      },
    },
    { encodeValuesOnly: true }
  )
  const response = await fetcher('/home-page', query)
  return response
}

And below is the response.

I think it is too nested to access in the frontend. Is it normal or is there any other thing that I can do?

Thanks.

1 Like

All I know is that this is by design.

There is a plugin that might be useful for you which reduces the depth of API responses:

1 Like