Gatsby: [bug] gatsby-source-hacker-news: cannot read property 'id' of null

[jaydinsweo]

Description

The plugin threw an error while running the sourceNodes lifecycle as it can't read property 'id' of null.
The plugins was worked as intended yesterday, not sure what when wrong as I didn't edit anything out.
I had a basic query so there isn't anything that could cause a problem. I tried to delete cached and node_modules and run npm install but the problem still persisted .

  const data = useStaticQuery(graphql`
    query {
      allHnStory(limit: 30, sort: { fields: order }) {
        nodes {
          title
          score
          url
          order
          descendants
        }
      }
    }
  `)

starting to fetch data from the Hacker News GraphQL API. Warning, this can take a long time e.g. 10-20 seconds
fetch HN data: 6151.572ms

 ERROR #11321  PLUGIN

"gatsby-source-hacker-news" threw an error while running the sourceNodes lifecycle:

Cannot read property 'id' of null



  TypeError: Cannot read property 'id' of null

  - gatsby-node.js:127 comment.kids.map.k
    [tablord]/[gatsby-source-hacker-news]/gatsby-node.js:127:68

  - Array.map

  - gatsby-node.js:127 comments.forEach
    [tablord]/[gatsby-source-hacker-news]/gatsby-node.js:127:44

  - Array.forEach

  - gatsby-node.js:122 createCommentNodes
    [tablord]/[gatsby-source-hacker-news]/gatsby-node.js:122:16

  - gatsby-node.js:146 comments.forEach
    [tablord]/[gatsby-source-hacker-news]/gatsby-node.js:146:11

  - Array.forEach

  - gatsby-node.js:122 createCommentNodes
    [tablord]/[gatsby-source-hacker-news]/gatsby-node.js:122:16

  - gatsby-node.js:146 comments.forEach
    [tablord]/[gatsby-source-hacker-news]/gatsby-node.js:146:11

  - Array.forEach

  - gatsby-node.js:122 createCommentNodes
    [tablord]/[gatsby-source-hacker-news]/gatsby-node.js:122:16

  - gatsby-node.js:146 comments.forEach
    [tablord]/[gatsby-source-hacker-news]/gatsby-node.js:146:11

  - Array.forEach

  - gatsby-node.js:122 createCommentNodes
    [tablord]/[gatsby-source-hacker-news]/gatsby-node.js:122:16

  - gatsby-node.js:146 comments.forEach
    [tablord]/[gatsby-source-hacker-news]/gatsby-node.js:146:11

  - Array.forEach

Steps to reproduce

Install npm i gatsby-source-hacker-news on a new gatsby-default-starter also produce error.

 error  in ./src/pages/index.js
⠀
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/nguyennguyen/Desktop/test1/src/pages/index.js
  7:7  error  Cannot query field "allHnStory" on type "Query". Did you mean "allDirectory"?  graphql/template-strings

Environment

  System:
    OS: macOS 10.15
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.132
    Safari: 13.0
  npmPackages:
    gatsby: ^2.15.11 => 2.15.11
    gatsby-image: ^2.2.17 => 2.2.17
    gatsby-plugin-sharp: ^2.2.20 => 2.2.20
    gatsby-source-filesystem: ^2.1.21 => 2.1.21
    gatsby-source-hacker-news: ^2.1.7 => 2.1.7
    gatsby-source-medium: ^2.1.5 => 2.1.5
    gatsby-transformer-sharp: ^2.2.13 => 2.2.13
  npmGlobalPackages:
    gatsby-cli: 2.7.44
    gatsby: 2.13.83

Run gatsby info --clipboard in your project directory and paste the output here.

[crock]

@nguyenami You are querying it wrong. All graphql queries return an array called "edges".

From the gatsby-source-hacker-news documentation:

query {
  allHnStory(sort: { fields: [order] }) {
    edges {
      node {
        id
        title
        score
        order
        domain
        url
        by
        descendants
        timeISO(fromNow: true)
        children {
          id
          text
          timeISO(fromNow: true)
          by
        }
      }
    }
  }
}

[crock]

@songfarm-david It appears your issue is unrelated. Please open a new issue for gatsby-source-wordpress. Though I will say upon quick inspection of your provided code snippet, you are not querying for the id in two of the queries, so that may be why it is undefined.

[songfarm-david]

Thanks @crock My mistake. I removed my original, unrelated comment.

[jaydinsweo]

@crock, somehow it worked, my thought was it wasn't a query problem because I couldn't run npm start. Out of curiosity, what is the difference if I did fetch through allHnstory { nodes {..}} and allHnstory{edges{..}}, if it wasn't allowed then why it in the graphql option?

[crock]

what is the difference if I did fetch through allHnstory { nodes {..}} and allHnstory{edges{..}}, if it wasn't allowed then why it in the graphql option?

It's just how GraphQL works, or at least how it works in Gatsby. This applies to all source plugins, so with gatsby-source-wordpress, you would still have an edges key.

Closing this issue now.