Trouble retrieving data from Wordpress headless CMS using GraphQL

Question

Good morning,

I am learning to create websites based on Wordpress headless CMS and I cannot retrieve data.

On the Wordpress side, in the GraphQL plugin, specifically in the IDE, everything works correctly and the query content is returned to me as intended, but I have a problem with receiving the same data using graphql in my project in Visual Studio Code (http://localhost:8000/___graphql), I don’t know why I get an error when these queries are identical…

Example of a correct query in GraphQl IDE Wordpress plugin:

query MyQuery {
  page(id: "cG9zdDo5MjY=") {
    id
    title
    children {
      nodes {
        ... on Page {
          id
          uri
          title
        }
      }
    }
    parent {
      node {
        ... on Page {
          id
          uri
          title
          children {
            nodes {
              ... on Page {
                id
                title
                uri
              }
            }
          }
        }
      }
    }
  }
}

I receive data:

{
  "data": {
    "page": {
      "id": "cG9zdDo5MjY=",
      "title": "Budget Cakes",
      "children": {
        "nodes": []
      },
      "parent": {
        "node": {
          "id": "cG9zdDoyMzQ=",
          "uri": "/our-cakes/",
          "title": "Our cakes",
          "children": {
            "nodes": [
              {
                "id": "cG9zdDo5MjY=",
                "title": "Budget Cakes",
                "uri": "/our-cakes/budget-cakes/"
              },
              {
                "id": "cG9zdDo5MTg=",
                "title": "Cupcakes",
                "uri": "/our-cakes/cupcakes/"
              },
              {
                "id": "cG9zdDo0NjI=",
                "title": "Super Mega Cakes",
                "uri": "/our-cakes/super-mega-cakes/"
              }
            ]
          }
        }
      }
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

The same query but already on localhost (http://localhost:8000/___graphql):

query MyQuery {
  wpPage(id: {eq: "cG9zdDo5MjY="}) {
      id
      title
        wpChildren {
        nodes {
          ... on WpPage {
            id
            uri
            title
          }
        }
      }
        wpParent {
        node {
          ... on WpPage {
            id
            uri
            title
            wpChildren {
              nodes {
                ... on WpPage {
                  id
                  title
                  uri
                }
              }
            }
          }
        }
      }
  }
}

I receive data:

{
  "errors": [
    {
      "message": "Cannot read properties of undefined (reading 'type')",
      "locations": [
        {
          "line": 15,
          "column": 9
        }
      ],
      "path": [
        "wpPage",
        "wpParent",
        "node"
      ],
      "extensions": {
        "stack": [
          "TypeError: Cannot read properties of undefined (reading 'type')",
          "    at C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\gatsby\\src\\schema\\schema.js:440:57",
          "    at completeAbstractValue (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:773:23)",
          "    at completeValue (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:624:12)",
          "    at completeValue (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:584:23)",
          "    at executeField (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:489:19)",
          "    at executeFields (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:413:20)",
          "    at completeObjectValue (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:914:10)",
          "    at completeValue (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:635:12)",
          "    at executeField (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:489:19)",
          "    at executeFields (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:413:20)",
          "    at completeObjectValue (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:914:10)",
          "    at completeValue (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:635:12)",
          "    at C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql\\execution\\execute.js:486:9",
          "    at processTicksAndRejections (node:internal/process/task_queues:95:5)",
          "    at async Promise.all (index 0)",
          "    at handler (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql-http\\lib\\handler.js:283:22)",
          "    at requestListener (C:\\Users\\Webkon\\Documents\\kursjs.pl\\Gatsby\\Wordpress\\wp-cakeit\\cakeit-tutorial\\node_modules\\graphql-http\\lib\\use\\express.js:28:34)"
        ]
      }
    }
  ],
  "data": {
    "wpPage": {
      "id": "cG9zdDo5MjY=",
      "title": "Budget Cakes",
      "wpChildren": {
        "nodes": []
      },
      "wpParent": null
    }
  },
  "extensions": {}
}

I also tried to retrieve it as AllWpPages and it’s the same, generally whenever I try to access

wpParent {
  node {
    id
  }
}

In any way, I always get an error… Please help.

I am learning from the Weibenfalk course on youtube https://www.youtube.com/watch?v=zaV41KpiDGk

The problem appears from 3:50:00

I will add that I am not working on the same version of gatsby graphql and plugins as the training leader, I am trying to receive everything in the latest versions of all extensions - so far everything has been successful until now because I am stuck and don’t know what to do next. Please help.