Graphql mutation with nested types? - reactjs

Question

I'am having troubles with graphql input types.
I'am using react with apollo
i have this working mutation:
addQuestion(
question: QuestionInput!
): Question!
with this type:
type QuestionInput {
name: String!
account_id: Int!
chatbot_id: Int!
question_variants: [String!]!
answer: String!
}
but the problem happens with this mutation:
updateBranch(
id: Int!
branch: BranchInput!
): Branch!
with this type:
type BranchInput {
lead_id: Int!
title: String!
visible_order: Int!
bot_photo: String!
responses: [ResponseInput!]!
bubbles: [BubbleInput!]!
}
and these nested types:
type ResponseInput {
branch_id: Int
owner: String!
message: String!
}
type BubbleInput {
branch_id: Int
name: String!
goto: String!
}
the mutation works on graphql playground:
mutation {
updateBranch(
id: 2
branch: {
lead_id: 1
title: "new title"
visible_order: 1
bot_photo: "photo"
responses: [
{ message: "message 1", owner: "owner1" }
{ message: "message 2", owner: "owner 2" }
]
bubbles: [{name: "bubble 1", goto: "link"}]
}
) {
id
title
}
}
When i execute the mutation in code like this :
const handleEditBranche = async (
lead_id: number,
title: string,
visible_order: number,
bot_photo: string,
responses: {}[],
bubbles: {}[],
id?: string
) => {
const newResponses = responses.map((response: any) => [
{ message: response.message, owner: response.owner },
]);
const newBubbles = bubbles.map((bubble: any) => [
{ name: bubble.name, goto: bubble.goto },
]);
console.log(id, title, visible_order, bot_photo, newResponses, newBubbles);
await updateBranche({
variables: {
id,
branch: {
title,
lead_id,
visible_order,
bot_photo,
responses: newResponses,
bubbles: newBubbles,
},
},
});
//setShowEdit({});
};
I get this error :
even though the data are correct:
I want to include those 2 type inside my mutation, but i don't know how.

Answer 1

The issue is with the way you are constructing the payload.
const newResponses = responses.map((response: any) =>
{ message: response.message, owner: response.owner },
);
const newBubbles = bubbles.map((bubble: any) =>
{ name: bubble.name, goto: bubble.goto },
);
console.log(id, title, visible_order, bot_photo, newResponses, newBubbles);
Removed the additional array for each element in newResponses and newBubbles