Gatsby warning on build "query takes too long"

Viewed 3678

I am building a static website with Gatsby and Netlify CMS. The website is hosted on Netlify as well. I have a blog section and I generate a page per article from a markdown file. I have the following warning during build "query takes too long" for every article page I generate. The site builds eventually but the build time gets longer and longer the more pages I am generating so I'm afraid it will become too long when I start having too many articles in my site.

I am generating a page for each markdown file that is being created by netlify CMS.

Would you mind looking and the code I have in the gatsby-node file and the query I am using in my blog template file to see if I'm doing anything wrong that would explain the build time warning message ?

Thanks

Here is my development environment

  npmPackages:
    gatsby: ^2.26.1 => 2.26.1
    gatsby-image: ^2.10.0 => 2.10.0
    gatsby-plugin-netlify-cms: ^4.8.0 => 4.8.0
    gatsby-plugin-react-helmet: ^3.8.0 => 3.8.0
    gatsby-plugin-sharp: ^2.13.0 => 2.13.0
    gatsby-plugin-styled-components: ^3.9.0 => 3.9.0
    gatsby-remark-images: ^3.10.0 => 3.10.0
    gatsby-remark-prismjs: ^3.12.0 => 3.12.0
    gatsby-source-filesystem: ^2.9.1 => 2.9.1
    gatsby-transformer-remark: ^2.15.0 => 2.15.0
    gatsby-transformer-sharp: ^2.11.0 => 2.11.0
  npmGlobalPackages:
    gatsby-cli: 2.18.0

here is the code I've got in the gatsby-node file to generate my posts pages

exports.createPages = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions

  const blogPostTemplate = require.resolve(`./src/templates/blog-post.js`)

  const categoryPageTemplate = require.resolve(
    `./src/templates/category-page.js`
  )
  const uncategorizedPageTemplate = require.resolve(
    `./src/templates/uncategorized.js`
  )
  const _ = require("lodash")

  const result = await graphql(`
    {
      posts: allMarkdownRemark(
        sort: { fields: [frontmatter___date], order: DESC }
      ) {
        edges {
          node {
            id
            frontmatter {
              categories
            }
            fields {
              slug
            }
          }
        }
      }
      categoriesGroup: allMarkdownRemark {
        group(field: frontmatter___categories) {
          fieldValue
        }
      }
    }
  `)
  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  const posts = result.data.posts.edges
  const categories = result.data.categoriesGroup.group

  posts.forEach(({ node }, index) => {
    const nextPostId = index === 0 ? null : posts[index - 1].node.id
    const previousPostId =
      index === posts.length - 1 ? null : posts[index + 1].node.id

    createPage({
      path: `blog${node.fields.slug}`,
      component: blogPostTemplate,
      context: {
        // additional data can be passed via context
        id: node.id,
        index,
        nextPostId
        previousPostId
      },
    })
  })
}

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({
      node,
      getNode,
    })

    createNodeField({
      node,
      name: `slug`,
      value,
    })
  }
}

and here is the query I've got in my blog-post template file to get the post with the id from the pageContext:

export const pageQuery = graphql`
  query($id: String!, $previousPostId: String, $nextPostId: String) {
    markdownRemark(id: { eq: $id }) {
      id
      html
      frontmatter {
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 1600) {
              ...GatsbyImageSharpFluid_withWebp_tracedSVG
            }
          }
        }
        title
        description
        date(formatString: "MMMM DD, YYYY")
        categories
      }
    }
    previous: markdownRemark(id: { eq: $previousPostId }) {
      frontmatter {
        title
      }
      fields {
        slug
      }
    }
    next: markdownRemark(id: { eq: $nextPostId }) {
      frontmatter {
        title
      }
      fields {
        slug
      }
    }
  }
`
1 Answers

Gatsby's team is actually working on reducing the build time by adding some "cache" features. You can follow the stack trace in their releases notes, they are still in beta testing (some of them are focused mainly on gatsby develop.

If you want to try it them to check if it improves the build-develop time, you just need to upgrade Gatsby to the latest version (^2.28) and:

// In your gatsby-config.js
module.exports = {
  // your existing config
  flags: {
    FAST_DEV: true,
  },
}

Regarding the gatsby build, in the meantime, in Netlify, you can activate some plugins (Gatsby Cache for example).

Among all this stuff, you can also add the incremental build feature (described in this Netlify's post by the great Jason Lengstorf). After you've installed the needed dependencies (upgrade Gatsby and cross-env), just customize the build command (also in Netlify's dashboard) to enable the PAGE_BUILD_ON_DATA feature:

"build": "cross-env GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages"
Related