Gatsby: Error: The result of this StaticQuery could not be fetched.

[Arsikod]

Description

Cannot open blog page with useStaticQuery

Steps to reproduce

import React from 'react'
import Layout from '../components/layout'
import { Link, useStaticQuery, graphql } from 'gatsby'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faIgloo } from '@fortawesome/free-solid-svg-icons'
library.add(faIgloo)

const BlogPage = () => {
  const slugData = useStaticQuery(graphql`
    query{
      allMarkdownRemark{
        edges{
          node{
            fields{
              slug
            }
          }
        }
      }
    } 
  `)
  console.log(slugData.allMarkdownRemark.edges[0])
  const data = useStaticQuery(graphql`
    query{
      allMarkdownRemark{
        edges{
          node{
            frontmatter{
              title
              date
            }
          }
        }
      }
    }
  `)
  const nodeData = data.allMarkdownRemark.edges
  const objs = nodeData.map((element, i) => {
    return(
      <li>
        <Link to={`blog/${slugData.allMarkdownRemark.edges[i].node.fields.slug}`}>
          <h3>{element.node.frontmatter.title}</h3>
          <p>{element.node.frontmatter.date}</p>
        </Link>
      </li>
    )
  })
  return(
    <Layout>
      <h1 className='blogs'>Blog</h1>
      <ol>
       {objs}
      </ol>
      <p>Home <Link to='/'><FontAwesomeIcon icon='igloo' size='lg'/></Link></p>
    </Layout>
  )
}

export default BlogPage;

Expected result

I should see blogPage page

Actual result

Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues

Environment

System:
OS: Windows 10
CPU: (2) x64 AMD A9-9420 RADEON R5, 5 COMPUTE CORES 2C+3G
Binaries:
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 2.7.15 - /c/Users/lenovo/.windows-build-tools/python27/python
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.15.15 => 2.15.15
gatsby-plugin-playground: ^1.0.6 => 1.0.6
gatsby-plugin-sass: ^2.1.14 => 2.1.14
gatsby-plugin-sharp: ^2.2.24 => 2.2.24
gatsby-remark-images: ^3.1.22 => 3.1.22
gatsby-remark-relative-images: ^0.2.3 => 0.2.3
gatsby-source-filesystem: ^2.1.22 => 2.1.22
gatsby-transformer-remark: ^2.6.23 => 2.6.23

[muescha]

https://www.gatsbyjs.org/blog/2019-02-20-introducing-use-static-query/
Limitations:
Only one useStaticQuery per Javascript file Is possible

[muescha]

With your 2 queries it is possible: Combine it into one GraphQL query

[muescha]

jsx const data = useStaticQuery(graphql` query{ allMarkdownRemark{ edges{ node{ fields{ slug } frontmatter{ title date } } } } } `)

I hope I had not make an error ... Check it in graphical explorer

[muescha]

See also the last queries in https://www.gatsbyjs.org/tutorial/part-seven/

[LekoArts]

Thank you for opening this!

By using only one StaticQuery you should solve your issue.

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby!

[jetleebruce]

Delete .cache and then gatsby develop again.