How to make 'first' attribute dynamic in Shopify GraphQL?

Viewed 130

I am developing an Angular application, and I have a query like this using axios, where I want to make first parameter dynamic because of pagination size:

await axios({
url: process.env.SHOPIFY_STORE_URL,
method: 'post',
data: {
  query: `
  query ($pieces: Int) {
    products(first: $pieces) {
      edges {
        node {
          id
          description
          title
          storefrontId
          productType
          totalInventory
          tracksInventory
          isGiftCard
          priceRangeV2 {
            minVariantPrice {
              amount
              currencyCode
            }
            maxVariantPrice {
              amount
              currencyCode
            }
          }
        }
      }
    }
  }
`,
  variables: {
    pieces: this.first,
  }
},
headers: {
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'X-Shopify-Access-Token': process.env.SHOPIFY_PASSWORD,
},
}).then((result) => {...}

If I execute it, passing a variable, I get a response saying that you must provide one of first or last.

Is it because first must be a fixed value or something?

1 Answers

You always include an integer for first or last. You can also do paging, so you ask for cursors. You provide a before or after, and those can actually be nulls if you are calling the first time.

Note that in Shopify GQL world there is no paging, so I am not sure what you refer to, as paging is simply passing in a before or after with a cursor. I guess if you mean hasNextPage?

Related