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?