title: Gatsby warning on build "query takes too long"
body: <p>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 &quot;query takes too long&quot; 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.</p>
  <p>I am generating a page for each markdown file that is being created by netlify CMS.</p>
  <p>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 ?</p>
  <p>Thanks</p>
  <p>Here is my development environment</p>
  <pre><code>  npmPackages:
      gatsby: ^2.26.1 =&gt; 2.26.1
      gatsby-image: ^2.10.0 =&gt; 2.10.0
      gatsby-plugin-netlify-cms: ^4.8.0 =&gt; 4.8.0
      gatsby-plugin-react-helmet: ^3.8.0 =&gt; 3.8.0
      gatsby-plugin-sharp: ^2.13.0 =&gt; 2.13.0
      gatsby-plugin-styled-components: ^3.9.0 =&gt; 3.9.0
      gatsby-remark-images: ^3.10.0 =&gt; 3.10.0
      gatsby-remark-prismjs: ^3.12.0 =&gt; 3.12.0
      gatsby-source-filesystem: ^2.9.1 =&gt; 2.9.1
      gatsby-transformer-remark: ^2.15.0 =&gt; 2.15.0
      gatsby-transformer-sharp: ^2.11.0 =&gt; 2.11.0
    npmGlobalPackages:
      gatsby-cli: 2.18.0
  </code></pre>
  <p>here is the code I've got in the gatsby-node file to generate my posts pages</p>
  <pre><code>exports.createPages = async ({ actions, graphql, reporter }) =&gt; {
    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(&quot;lodash&quot;)
  
    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) =&gt; {
      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 }) =&gt; {
    const { createNodeField } = actions
  
    if (node.internal.type === `MarkdownRemark`) {
      const value = createFilePath({
        node,
        getNode,
      })
  
      createNodeField({
        node,
        name: `slug`,
        value,
      })
    }
  }
  </code></pre>
  <p>and here is the query I've got in my blog-post template file to get the post with the id from the pageContext:</p>
  <pre><code>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: &quot;MMMM DD, YYYY&quot;)
          categories
        }
      }
      previous: markdownRemark(id: { eq: $previousPostId }) {
        frontmatter {
          title
        }
        fields {
          slug
        }
      }
      next: markdownRemark(id: { eq: $nextPostId }) {
        frontmatter {
          title
        }
        fields {
          slug
        }
      }
    }
  `
  </code></pre>