shorten the graphql field value - graphql

Question

I am trying to fetch image path in an alias field using graphql, I am able to get output like this:
Output:
{
"data": {
"leaders": [
{
"partyImg": {
"image": {
"url": "/uploads/17a5f020cc974679ac52e56a22b74dd6.png"
}
}
},
{
"partyImg": {
"image": {
"url": "/uploads/70bd673d41654058847e39c14cda5fef.png"
}
}
},
{
"partyImg": {
"image": {
"url": "/uploads/c54a0ace0bb34da3985c67945b1d0bf0.png"
}
}
}
]
}
}
When I used the following graphql code:
Input:
query Leaders{
leaders{
partyImg: party{image: Image{ url }},
}
}
The output I am trying to get is:
Expected output:
{
"data": {
"leaders": [
{
"partyImg": "/uploads/17a5f020cc974679ac52e56a22b74dd6.png"
},
{
"partyImg": "/uploads/70bd673d41654058847e39c14cda5fef.png"
},
{
"partyImg": "/uploads/c54a0ace0bb34da3985c67945b1d0bf0.png"
}
]
}
}
Please help me to prepare the graphql input which could generate the expected output.

Answer 1

It appears the graphql schema prevents you from getting the data in the format that you want. Based on your input query, I expect the schema looks something like this:
query {
leaders: [Leader]
}
type Leader {
party: Party
}
type Party {
Image: Image
}
type Image {
url: String
}
To get the data in the format that you want, you would need a schema that looks more like:
query {
leaders: [Leader]
}
type Leader {
party: Party,
imageUrl: String
}
Then you could do:
query Leaders {
leaders {
partyImg: imageUrl
}
}
I assume you don't control the schema, so you would have to do post processing. If you are using javascript, the following could work for the above output as a simple mapping exercise.
(function() {
var output = {
"data": {
"leaders": [{
"partyImg": {
"image": {
"url": "/uploads/17a5f020cc974679ac52e56a22b74dd6.png"
}
}
},
{
"partyImg": {
"image": {
"url": "/uploads/70bd673d41654058847e39c14cda5fef.png"
}
}
},
{
"partyImg": {
"image": {
"url": "/uploads/c54a0ace0bb34da3985c67945b1d0bf0.png"
}
}
}
]
}
};
var transformed = {
data: {
leaders: output.data.leaders.map(function flattenUrl(item) {
return {
partyImg: item.partyImg.image.url
};
})
}
}
document.getElementById('transformedOutput').innerHTML = JSON.stringify(transformed);
}());
<div id="transformedOutput"></div>
If you are the author of this graphql schema, you can structure it in whatever way makes the most sense to your applications and/or consumers.