gatsby: Issue: warning Query takes too long + Build breaks on netlify

Description

I’m getting the Warning Query takes too long on very small queries, for example:

export const pageQuery = graphql`
  query impressumPageQuery {
    markdownRemark(frontmatter: { templateKey: { eq: "impressum-page" } }) {
      html
    }
  }
`;

This is not a problem for building my site locally but is on netlify which enforces a RAM limit (NPM error code 137).

I have no idea why such a query would be so big. At first I thought it might be related to the new gatsby-plugin-image but it also appears on some sites with very small queries, like the above.

Steps to reproduce

  1. Fork project: https://github.com/quansenB/Website-Faltermeier
  2. Build on netlify

Expected result

Should be built without Error and query takes too long warning

Actual result

Getting npm ERR! code 137 (out of memory)

Environment

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i7-2640M CPU @ 2.80GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    npm: 6.14.10 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 89.0.4389.82
    Edge: 89.0.774.54
    Firefox: 85.0.2
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.0.4 => 3.0.4
    gatsby-cli: ^3.0.0 => 3.0.0
    gatsby-plugin-google-tagmanager: ^3.0.0 => 3.0.0
    gatsby-plugin-image: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^3.0.0 => 3.0.0
    gatsby-plugin-minify-html: ^1.0.4 => 1.0.4
    gatsby-plugin-netlify: ^3.0.0 => 3.0.0
    gatsby-plugin-netlify-cms: ^5.0.0 => 5.0.0
    gatsby-plugin-offline: ^4.0.0 => 4.0.0
    gatsby-plugin-postcss: ^4.0.0 => 4.0.0
    gatsby-plugin-preact: ^5.0.0 => 5.0.0
    gatsby-plugin-preload-fonts: ^2.0.0 => 2.0.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
    gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5
    gatsby-plugin-sharp: ^3.0.1 => 3.0.1
    gatsby-plugin-sitemap: ^3.0.0 => 3.0.0
    gatsby-plugin-svgr: ^3.0.0-beta.0 => 3.0.0-beta.0
    gatsby-remark-images: ^4.0.0 => 4.0.0
    gatsby-remark-relative-images-v2: ^0.1.5 => 0.1.5
    gatsby-source-filesystem: ^3.0.0 => 3.0.0
    gatsby-transformer-remark: ^3.0.0 => 3.0.0
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0
  npmGlobalPackages:
    gatsby: 3.0.4

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 6
  • Comments: 28 (16 by maintainers)

Most upvoted comments

That sounds great @ascorbic! Alghtouh I’m still seeing the query takes too long issue even without AVIFs included.

I’m going to add a note to the docs warning about the build time performance implications of AVIF support. It’s the reason we don’t enable it by default. I think the issue here is that Netlify containers don’t appear to have enough memory to handle AVIF builds on your site, whereas Gatbsy Cloud is specifically optimised to handle it.

We’ve heard reports that AVIF transformations are slow. Can you double-check by temporarily disabling any AVIF usages and build without it? Just to confirm if it is the actual source of the issue.

I have the same error. The other problem is that gatsby-plugin-image seems to be generating the images when query is running. My builds are now 25min+ instead of previous 5-6min. Any help?

"dependencies": {
    "babel-preset-gatsby": "^1.0.0",
    "classnames": "^2.2.6",
    "gatsby": "^3.0.4",
    "gatsby-plugin-advanced-sitemap": "^1.4.5",
    "gatsby-plugin-brotli": "^2.0.0",
    "gatsby-plugin-disqus": "^1.2.2",
    "gatsby-plugin-gdpr-cookies": "^1.0.3",
    "gatsby-plugin-google-tagmanager": "^3.0.0",
    "gatsby-plugin-image": "^1.0.1",
    "gatsby-plugin-netlify": "^3.0.0",
    "gatsby-plugin-netlify-cms": "^5.0.0",
    "gatsby-plugin-purgecss": "^6.0.0",
    "gatsby-plugin-react-helmet": "^4.0.0",
    "gatsby-plugin-root-import": "^2.0.5",
    "gatsby-plugin-sass": "^4.0.2",
    "gatsby-plugin-sharp": "^3.0.1",
    "gatsby-remark-autolink-headers": "^3.0.0",
    "gatsby-remark-copy-linked-files": "^3.0.0",
    "gatsby-remark-images": "^4.0.0",
    "gatsby-remark-prismjs": "^4.0.0",
    "gatsby-remark-relative-images": "^2.0.2",
    "gatsby-source-filesystem": "^3.0.0",
    "gatsby-transformer-remark": "^3.0.0",
    "gatsby-transformer-sharp": "^3.0.0",
    "lodash": "^4.17.15",
    "lodash-webpack-plugin": "^0.11.4",
    "netlify-cms-app": "^2.14.29",
    "node-sass": "^5.0.0",
    "parcel-bundler": "^1.9.4",
    "prismjs": "^1.22.0",
    "prop-types": "^15.6.0",
    "react": "^17.0.1",
    "react-confetti": "^6.0.0",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-markdown": "^5.0.2",
    "react-slick": "^0.28.1",
    "react-svg": "^12.1.0",
    "react-transition-group": "^4.4.1",
    "slick-carousel": "^1.8.1",
    "universal-cookie": "^4.0.2",
    "uuid": "^8.3.2"
  },

@vladar That’s definitely the case, another point could be the DOMINANT_COLOR option. As a solution I had to switch from Netlify to Gatsby Cloud for build processes (Netlify would finish builds but threw errors when deploying).

When it comes to images, could you also disable warnings on FULL_WIDTH images? It seems kind of redundant 😉

i have the same problem.

Same here. I updated to Gatsby v3 and my build went from 3 minutes to 30 minutes with a timeout on Netlify. I see many of these messages.

10:36:39 AM: warning Query takes too long:
10:36:39 AM: File path: /opt/build/repo/src/templates/post.js
10:36:39 AM: URL path: /posts/to-be-loved-by-you
10:36:39 AM: Context: {
10:36:39 AM:     "slug": "to-be-loved-by-you"
10:36:39 AM: }

The website is open source. In particular, the build logs are complaining about the page query in my post.js template.

const query = graphql`
    query($slug: String!) {
        markdownRemark(frontmatter: {slug: {eq: $slug}}) {
            html
            frontmatter {
                slug
                title
                date(formatString: "MMMM D, YYYY")
                tags
                image {
                    publicURL
                    childImageSharp {
                        gatsbyImageData(
                            width: 750
                            placeholder: BLURRED
                            formats: [AUTO, WEBP, AVIF]
                            quality: 100
                        )
                    }
                }
            }
        }
    }
`