A space to discuss GraphQL queries, mutations, troubleshooting, throttling, and best practices.
For the longest time, I had a query that was working. Then, that stopped. No idea why. The query was on products.
products(first: 10) {
edges {
node {
id
title
options {
name
values
}
}
}
}
Now the interesting thing is in the response. Particularly, options. The response in JSON is like this sample:
"options": [
{
"name": "Color",
"values": [
"Navy",
"Olive"
]
},
{
"name": "Size",
"values": [
"XS",
"S",
"M",
"L",
"XL"
]
}
]
So my code stopped working. The server code to_json this GQL data wound up spitting out messages about stack level too deep. Yikes!
I examined the response and it was a little ugly. It was actually nested Ruby objects, which were clearly not being translated to JSON nicely. So I wrote a little ditty to produce nice JSON and then all my troubles went away server side. Mind you, with nothing changing but me going from 2021-01 API to 2022-07, this was perplexing as to why? What happened at Shopify GraphQL to change my results?
So now that I fixed the deserialization of Ruby objects cleanly to JSON regardless of why my front-end React-based Polaris code was choking on the same structure. Why????
The offending code tells me, way back, the deserialization to JSON by what was working code, added in a data attribute for some reason. And that was not something I added in in my bush fix, so what the heck? This code used to work.
function renderOptions(index, options) {
let list = (
options[index].data.values.map((v) => {
let id=`${v}:${index}`
return <li key={id}>{v}</li>
})
);
return (
<>
<Heading>{options[index].data.name}</Heading>
<ul>
{list}
</ul>
</>
);
}
But now the React blows chunks as it has no .data attribute. So I had to remove those to get it all working. WTF. How does code that worked perfectly a year ago, suddenly just implode, and seemingly break in 2 places for 2 different things and not be totally a cluster-f%^k everywhere else too?
Anyway, I dunno who broke what, but when playing with those product options and GraphQL watch yourself! You might think it'll just work out as expected, but something in the universe like excess gamma rays might be smoking your bowl for you.