Gatsby: I am unable to create pages programmatically using gatsby-node.js

[Chanakya888]

I am trying to pull data from contentful and use it to create pages using gatsy-node.js.
Link to repo

gatsby-config.js

const dotenv = require("dotenv")

if (process.env.NODE_ENV !== "production") {
  dotenv.config()
}
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `ytqul2s2r35l`,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `Images`,
        path: `${__dirname}/src/Images`,
      },
    },
    {
      resolve: "gatsby-plugin-postcss",
      options: {
        postCssPlugins: [require("tailwindcss")],
      },
    },
    {
      resolve: "gatsby-plugin-purgecss",
      options: {
        printRejected: false,
        develop: false,
        tailwind: true,
      },
    },
  ],
}

gatsby-node.js

exports.createPages = async ({ graphql, actions, reporter }) => {
  const result = await graphql(`
  query {
    allContentfulIndividualTeamMember { 
        nodes {
          slug
        }
    } 
  } 
  `);
  if (result.error) {
    reporter.panic("error loading data", JSON.stringify(result.errors))
  }
  result.data.allContentfulIndividualTeamMember.nodes.forEach(node => {
    actions.createPage({
      path: `/${node.slug}`,
      component: require.resolve("./src/Templates/individualTeamPage.js"),
      context: {
        slug: node.slug,
      },
    })
  })
}

individualTeamPage.js

import React from "react"
import { graphql } from "gatsby"
const IndividualTeamPage = ({ data }) => {
  console.log("checking ")
  return (
    <div>
      <h1>Checking</h1>
      <p>{data.edges.node.nameOfTheEmployee} </p>
    </div>
  )
}

export default IndividualTeamPage
export const query = graphql(`
  query($slug: String!) {
    allContentfulIndividualTeamMember(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          positionInTheCompany
          nameOfTheEmployee
        }
      }
    }
  }
`)

Error on browser
Error: It appears like Gatsby is misconfigured. Gatsby related graphql calls are supposed to only be evaluated at compile time, and then compiled away. Unfortunately, something went wrong and the query was left in the compiled code.

[freiksenet]

Hello!

Unfortunately I can't run your reproduction because I don't have access to your contentful space. Could you confirm that you have Team Members inside contentful? This error is likely happening because there weren't any pages created for this template.

Thank you!

[LekoArts]

You use the wrong syntax in your template:

export const query = graphql(`
  query($slug: String!) {
    allContentfulIndividualTeamMember(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          positionInTheCompany
          nameOfTheEmployee
        }
      }
    }
  }
`)

It mustn't be

graphql(`content`)

But only tagged templates

graphql`content`

[Chanakya888]

Thank you, that worked. Didn't know there was difference between them.