question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

GetStaticProps Not working as expected on vercel Returning -1 HTTP error

See original GitHub issue

Hi team,

So I have a very large number of products, so I can’t use getSataticPaths as the build time exceeds 45 minutes (with shopify API rate limit throttling) (plus who wants to wait that long anyway)

[slug].js

export async function getStaticPaths({ locales }: GetStaticPathsContext) {
  const { products } = await getAllProductPaths()

  // we have too many products, static rendering will be done the first time a product is loaded up
  return {
    paths: [],
    fallback: true,
  }
}

Now this works perfectly on my local machine that builds everything every time. But on production its giving unexpected results on some products (not all). These products also work on my local environment which makes this super hard to debug:

https://storefront-7aja4imda-colabpantry.vercel.app/products/chutney-maison

Logs:

Screen Shot 2021-06-23 at 12 20 38 pm

Logs of a product that works: Screen Shot 2021-06-23 at 12 21 34 pm

Now if you are returning HTTP statuses, what does a status of -1 mean?

PS. I’m sorry I’m posting this here, I’ve submitted 2 detailed support tickets and both times they have told me to check the logs.

Its also worth noting that I can fix the issue by providing all the build paths eg.

[slug.js] (working - but build time exceeds 45 minutes)

export async function getStaticPaths({ locales }: GetStaticPathsContext) {
  const { products } = await getAllProductPaths()

  // we have too many products, static rendering will be done the first time a product is loaded up
  return {
    paths: products.map((product) => `/products${product.node.path}`),
    // paths: [],
    fallback: true,
  }
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:17 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
cond0rcommented, Jun 29, 2021

@achadee is a rate limit error that happens because on your getProduct query. You query too much for each product, so makes that query expensive. And by the time it reaches that product it throws that throttled error

Screenshot 2021-06-29 at 14 36 07

If Shopify measures that by the time first request happened until last response (by IP), lambda being slower than your machine maybe that’s the answer why on your local machine never happens (I managed to see build errors on mine too). And on my cloned one it stopped and generated at exact product 😃.

Screenshot 2021-06-29 at 14 30 45

After i removed the ‘collections’ part from your get product query and replaced with official product recommendations query, it seems to work, without generating 500 errors. As you can see on link bellow

https://storefront-pi.vercel.app/products/chutney-maison

Make sure you give me access to push the changes to another branch so you can merge if you want.

0reactions
cond0rcommented, Jun 30, 2021

@achadee the code above works because you have only 30 paths… then let’s say one path takes 1s you have 30 paths means your total query duration in build operation is 30s. Remember you query also pages, collections etc, so all queries added should not pass 60s per IP as it says there at Shopify. But the problem is that you query on each product path extra collections that has also other set of products, so is too much.

On the link above i was using the official query of getting product recommendations (not what you used, i completely removed collections path from the query, and used the link bellow as a separate request after i got the product ID), and changed the component a bit. And worked just fine with all 100 paths. If you want to keep that query, then change the variable on get-all-product-paths to 30 and will work.

https://shopify.dev/api/storefront/reference/common-objects/queryroot#productrecommendations-2021-04

Read more comments on GitHub >

github_iconTop Results From Across the Web

getStaticProps not working if the page is requested ... - GitHub
When a page with getStaticProps is requested within command line (not browser), it is not generated and returns a page with undefined data ......
Read more >
getStaticProps not really working on Vercel - Stack Overflow
I have this project, and when I upload it to Vercel, I get Error: Request failed with status code 429. I just have...
Read more >
Data Fetching: getStaticProps - Next.js
Learn how to use `getStaticProps` to generate static pages with Next.js. ... The notFound boolean allows the page to return a 404 status...
Read more >
Testing and error handling patterns in Next.js - LogRocket Blog
One of these is Next.js, a framework that makes working with React even ... The getStaticProps function should return an object containing ...
Read more >
Next.js: The Good, Bad and Ugly - An Idiosyncratic Blog
Issues with Next.js; CSS Modules; Automatic Static Optimization, ... build time by getStaticProps() function Products({ products }) { return ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found