Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

GraphQL response question

GraphQL response question

HunkyBill
Shopify Partner
4853 60 563

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.

 

 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Replies 0 (0)