I want to use Gatsby.js to get RSS data from GraphQL. GraphiQL or I am able to get it successfully

Question

I want to use Gatsby.js to get RSS data from GraphQL. GraphiQL or I am able to get it successfully. I have attached a picture of the error. It is showing up in the browser.

I have also attached an image of GraphiQL. enter image description here

import React from "react"
import HeaderFeedCell from "./HeaderFeedCell";
import * as styles from"./HeaderRssFeedList.module.css"
import { graphql,useStaticQuery} from "gatsby";

const HeaderRssFeedList = () => {
  const {data} = useStaticQuery(
    graphql`
    query {
      allFeedAlfalfa {
        nodes {
            title
            pubDate
            link
            content
            id
        }
        }
    }
    ` )
  return (
  
    <ul>
  {data.allFeedAlfalfa.node.map(feed => {
                    return <li><HeaderFeedCell feed={feed} /></li>
                })}
    </ul>
  )


}
export default HeaderRssFeedList;

error image enter image description here

Answer 1

Your node is the {allFeedAlfalfa} or data.allFeedAlfalfa, not data destructured as {data}. Use:

import React from "react"
import HeaderFeedCell from "./HeaderFeedCell";
import * as styles from"./HeaderRssFeedList.module.css"
import { graphql,useStaticQuery} from "gatsby";

const HeaderRssFeedList = () => {
  const data = useStaticQuery(
    graphql`
    query {
      allFeedAlfalfa {
        nodes {
            title
            pubDate
            link
            content
            id
        }
        }
    }
    ` )
  return (
  
    <ul>
  {data.allFeedAlfalfa.node.map(feed => {
                    return <li><HeaderFeedCell feed={feed} /></li>
                })}
    </ul>
  )


}
export default HeaderRssFeedList;

The useStaticQuery returns a data object with your node inside, so you need to destructure the property itself, not data.

You can destructurate the node as {allFeedAlfalfa} if you wish.