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

Question

我想使用 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

Answer 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 returns 一个包含你的节点的 data 对象，所以你需要解构属性本身，而不是 data。

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

我想使用 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

reactjs

graphql

gatsby