我想使用 Gatsby.js 从 GraphQL 获取 RSS 数据。 GraphiQL 或者我能够成功获得它答案

【问题标题】：I want to use Gatsby.js to get RSS data from GraphQL. GraphiQL or I am able to get it successfully我想使用 Gatsby.js 从 GraphQL 获取 RSS 数据。 GraphiQL 或者我能够成功获得它
【发布时间】：2022-01-14 20:50:38
【问题描述】：

我想使用 Gatsby.js 从 GraphQL 获取 RSS 数据。 GraphiQL 或者我能够成功获得它。我附上了错误的图片。它显示在浏览器中。

我还附上了 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;

错误图片 enter image description here

【问题讨论】：

标签： reactjs graphql gatsby

【解决方案1】：

您的节点是{allFeedAlfalfa} 或data.allFeedAlfalfa，而不是解构为{data} 的data。使用：

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;

useStaticQuery 返回一个带有您的节点的data 对象，因此您需要解构属性本身，而不是data。

如果您愿意，可以将节点解构为{allFeedAlfalfa}。

【讨论】：

感谢您的支持，此问题已解决