Storefront GQL API `first` argument bizare behavior

Technical Q&A
1

I’m experiencing some unexpected handling and an error attempting to search products.

Context

  • Next.js application hitting GQL from a pages API
  • Pointing at 2024-04 endpoint
  • Using the native JS fetch

Using the following approach, the response I get doesn’t seem to respect whether the first argument is present or not, unless it’s malformed. The focus here is on the products() query, but I’ve included some extra methodology in case there’s something more to this.

await fetch(endpoint, {
  method: "POST",
  headers: {
    X-Shopify-Storefront-Access-Token: ***,
    "Content-Type": "application/json"
  }
  body: JSON.stringify({
    query: `query {
      products(first: 10, query: "arbitrary") {
        edges { ... }
     }
    }`
  })
})

This runs and returned an error with the message: ‘you must provide one of first or last’ despite that first is clearly there.

Strangely, when I intentionally convert the value for first into a string, rather than the required Int, the server rightly detects the first argument, and barks about the incorrect type.

products(first: "10", query: "some-value") → message: Argument 'first' on Field 'products' has an invalid value ("10"). Expected type 'Int'.

Anybody run into this before or have any ideas? It seems very odd to me, if not unstable. Additionally, I’ve (only once) been able to recreate this behavior at the Graphiql shopify.dev provides, but a refresh of the page cleared it up. No such luck on my project, however.

2

I’ve figured it out and will close the loop here.

Further down in my query body I was asking for the images node and unaware that also required a first argument. I could see the error message in terminal, but the locations array was collapsed and I didn’t stop to expand that.

1 Like