Something went wrong and the query was left in the compiled code

[Trushar10]

Started learning Gatsby by following the YouTube tutorial. I have followed each step as shown in the tutorial. So I am at the stage of creating a post list page.

The post list page will have 3 posts and the other will be available through pagination. And it will be sorted in descending order.

I am getting an error as below:

  function graphql() {
  > 93 |   throw new Error(
       |        ^
    94 |     `It appears like Gatsby is misconfigured. Gatsby related \`graphql\` calls ` +
    95 |       `are supposed to only be evaluated at compile time, and then compiled away. ` +
    96 |       `Unfortunately, something went wrong and the query was left in the compiled code.\n\n` +

gatsby-node.js file:

  exports.createPages = async function({actions, graphql}){
      const {data} = await graphql(`
          query {
              allMdx(sort: {fields: frontmatter___date, order: DESC}) {
                  edges {
                      node {
                      frontmatter {
                          slug
                      }
                      id
                      }
                  }
              }
          }
      `)
  
      //Create paginated pages for posts
      const postPerPage = 3
  
      const numPages = Math.ceil(data.allMdx.edges.length / postPerPage)
  
      Array.from({ length: numPages }).forEach((_, i) => {
          actions.createPage({
              path: i === 0 ? `/` : `/${ i+1 }`,
              component: require.resolve("./src/templates/allPosts.js"),
              context: {
                  limit: postPerPage,
                  skip: i * postPerPage,
                  numPages, 
                  currentPage: i + 1,
              },
          })
      })
  
      // //Create Single blog posts
      // data.allMdx.edges.forEach(edge => {
      //     const slug = edge.node.frontmatter.slug,
      //     const id = edge.node.id
      //     actions.createPages({
      //         path: slug,
      //         component: require.resolve(`./src/templates/singlePost.js`),
      //         context: {id},
      //     })
      // })
  
  }

allPosts.js file:

  import React from "react"
  import {graphql} from "gatsby"
  import {Container, Content, ContentCard, FeatureImage, Pagination} from "../components"
  import {H1, P} from "../elements"
  
  const allPosts = ({pageContext, data}) => {
      const {currentPage, numPages} = pageContext
      const isFirst = currentPage === 1
      const isLast = currentPage === numPages
      const prevPage = currentPage - 1 === 1 ? "/" : `/${currentPage -1}`
      const nextPage = `/${currentPage + 1}`
  
      const posts = data.allMdx.edges
  
      return (
          <Container>
              <FeatureImage />
              <Content>
                  <H1 textAlign="center" margin="0 0 1rem 0">
                      Elit rhoncus tellus proin parturient.
                  </H1>
                  <P color="dark2" textAlign="center">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing volutpat risus quis lorem pulvinar et pulvinar sit dictum. Eget orci, orci in congue cursus nulla tincidunt facilisi.
                  </P>
                  {posts.map(post => (
                      <ContentCard 
                          key={post.node.frontmatter.slug}
                          date={post.node.frontmatter.date}
                          title={post.node.frontmatter.title}
                          excerpt={post.node.frontmatter.excerpt}
                          slug={post.node.frontmatter.slug}
                      />
                  ))}
              </Content>
              <Pagination 
                  isFirst={isFirst}
                  isLast={isLast}
                  prevPage={prevPage}
                  nextPage={nextPage}                
              />
          </Container>
      )
  }
  
  export default allPosts
  
  export const pageQuery = graphql(`
      query AllPostsQuery($skip: Int!, $limit:Int!){
          allMdx(sort: {fields: frontmatter___date, order: DESC}, skip: $skip, limit: $limit) {
              edges {
                  node {
                  frontmatter {
                      slug
                      title
                      date(formatString: "MMMM DD, YYYY")
                      excerpt
                  }
                  }
              }
          }
      }
  `)

[LekoArts]

In your allPosts file you need to call the query like this:

graphql`
{ your_query }
`

Not graphql(`{ your_query }`)

[Trushar10]

Thanks, It worked