GraphQL custom resolver

Strapi Version: 4.11.1

Hello,

I’m trying to make a call in a custom resolver in GraphQL, but the query is not returning the values of the images and nested components.

In my src/index.js I tryed following:

"use strict";

module.exports = {
  register({ strapi }) {
    const extensionService = strapi.service("plugin::graphql.extension");

    extensionService.use(({ strapi }) => ({
      typeDefs: `
        type CustomImageType {
          url: String
          width: Int
          height: Int
        }

        type CustomFirstSectionCardType {
          title: String
          description: String
          img: CustomImageType
        }

        type CustomFirstSectionType {
          title: String
          description: String
          img: CustomImageType
          cards: [CustomCardCicloType]
        }

        type CustomSecondSectionType {
          title: String
          description: String
          info: String
        }

        type CustomThirdSectionCardType {
          icon: CustomImageType
          text: String
        }

        type CustomThirdSectionTypes {
          title: String
          description: String
          cardTitle: String
          cards: [CustomCardMentoriaType]
        }

        type CustomHomeType {
          first: CustomFirstSectionType
          second: CustomSecondSectionType
          third: CustomThirdSectionType
        }

        type Query {
          customHome: CustomHomeType
        }
      `,
      resolvers: {
        Query: {
          customHome: {
            resolve: async (parent, args, context) => {
              const data = await strapi.db.query("api::home.home").findOne({ 
                populate: true
              });
              
              console.log(data);

              const firstSectionData = data.FirstSection;
              const firstSectionCards = firstSectionData.Cards.map((card) => ({
                title: card.Title,
                description: card.Description,
                img: {
                  url: card.CardImage.url,
                  width: card.CardImage.width,
                  height: card.CardImage.height,
                }
              }));
              const firstSection = {
                title: firstSectionData.Title,
                description: firstSectionData.Description,
                cards: firstSectionCards,
              };

              const secondSectionData = data.SecondSection;
              const secondSection = {
                title: secondSectionData.SectionTitle,
                description: secondSectionData.SectionDescription,
                info: secondSectionData.AdditionalInfo,
              };

              const thirdSectionData = data.ThirdSection;
              const thirdSectionCards = thirdSectionData.ThirdSectionCard.map((card) => ({
                text: card.Text,
                icon: {
                  url: card.Icon.url,
                  width: card.Icon.width,
                  height: card.Icon.height,
                }
              }));
              const thirdSection = {
                title: thirdSectionData.Title,
                description: thirdSectionData.Description,
                cardTitle: thirdSectionData.CardTitle,
                cards: thirdSectionCards,
              }

              return {
                first: firstSection,
                second: secondSection,
                third: thirdSection,
              };
            }
          }
        },
      },
      resolversConfig: {
        "Query.customHome": {
          auth: false,
        },
      },
    }));
  },
};

I put a console.log, and the data response comes without the images and Card components from the first and third sections.
Like this:

{
 id: 1,
 createdAt: '2023-06-21T17:01:27.763Z',
 updatedAt: '2023-06-21T17:04:56.225Z',
 publishedAt: '2023-06-21T17:04:56.206Z',
 FirstSection: {
   id: 1,
   Title: 'text goes here',
   Description: 'text goes here'
 },
 SecondSection: {
   id: 1,
   SectionTitle: 'text goes here',
   SectionDescription: 'text goes here',
   AdditionalInfo: 'text goes here'
 },
 ThirdSection: {
   id: 1,
   Title: 'text goes here',
   Description: 'text goes here',
   CardTitle: 'text goes here',
 },
}

What is the correct way to make the request and receive all the information from the card components and images?

I’m not sure but try with populate: '*'