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

Question

Started learning Gatsby by following YouTube tutorial. I have followed each step as shown in the tutorial. So I am at the stage of creating 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
                }
                }
            }
        }
    }
`)

Answer 1

In allPosts.js the query should be like this graphql{ your_query } instead of graphql({ your_query }).

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
                }
                }
            }
        }
    }
`