在 Gatsby 中出现错误：TypeError：无法读取未定义的属性“github”

Question

长期 WordPress 开发者和 Gatsby/React/GraphQL 新秀。

我正在尝试模拟这个Gatsby Github Displayer，它通过 GraphQL 连接到 Github API 并记录有关您的存储库的信息，然后将它们显示在页面上。

我希望做一些稍微不同的事情，将两个元素都作为组件，然后在我的 Gatsby website 的主页上显示其中一个组件。

这是my repo，其中包含错误。

这是我的组件：

import React from "react"

const RepositoryList = ({ repositories }) => (
  <div>
    {repositories.nodes.map((repository, i) => (
      <div key={i}>
        <h2><a href={repository.url}>{repository.name}</a></h2>
      </div>
    ))}
  </div>
)

export default RepositoryList

以及我想要在主页上呈现的组件：

import React from "react"
import RepositoryList from "../components/repository-list"

const WebDevelopment = ({ data }) => (
  <div>
    <h1>My repositories</h1>
    <RepositoryList repositories={data.github.viewer.repositories} />
  </div>
)

export default WebDevelopment

export const query = graphql`
  query RepositoriesQuery {
    github {
      viewer {
        repositories(
          privacy: PUBLIC
          affiliations: OWNER
          isFork: false
          first: 100
        ) {
          nodes {
            name
            url
          }
        }
      }
    }
  }`

这是我尝试将其呈现到主页上的方式：

import React from "react"

import Layout from "../components/layout"
import Headshot from "../components/headshot"
import PMIEFOldWebsite from "../components/pmief-old-website"
import PMIEFNewWebsite from "../components/pmief-new-website"
import SEO from "../components/seo"
import "./mystyles.scss"
import JFedOldWebsite from "../components/jfed-old-website"
import JFedNewWebsite from "../components/jfed-new-website"
import WebDevelopment from "../components/web-development"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Digital Marketing Strategist<br />Front-End Web Developer</h1>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Headshot />
    </div>
    <p>I've been in the web business for a long time. I worked in the nonprofit world for 15 years. I went from staff assistant to program administrator to accidental techie to full-fledged web developer.</p>
    <p>I'm currently a contractor at <a href="https://dudnyk.com/">Dudnyk</a> where I do front-end development on websites, email templates, and Google banner ads.</p>
    <p>I'm a developer with experience in HTML, CSS, PHP and JavaScript. I'm building this site on Gatsby so that I can play around with ES6 and React and start realizing the possiblities that the JAMstack offers.</p>
    <h2>Portfolio</h2>
    <h3>Project Management Institute Educational Foundation</h3>
    <p>I started as a program administrator and became the webmaster, email, and social media guy. I served as the staff technical expert and content manager for the rebranding and website redesign and migration from flat HTML files to Sitecore CMS.</p>
    <div className="container">
      <div className="columns">
        <div className="column">
          <h3>Before</h3>
          <PMIEFOldWebsite />
        </div>
        <div className="column">
          <h3>After</h3>
          <PMIEFNewWebsite />
        </div>
      </div>
    </div>
    <h3 style={{  marginTop: `3.45rem` }}>Jewish Federation of Greater Philadelphia</h3>
    <p>I was brought on as the technical project manager for the website redesign and migration from Drupal to WordPress. I stayed on as the solo web developer and email marketing manager.</p>
    <div className="container">
      <div className="columns">
        <div className="column">
          <h3>Before</h3>
          <JFedOldWebsite />
        </div>
        <div className="column">
          <h3>After</h3>
          <JFedNewWebsite />
        </div>
      </div>
    </div>
    <WebDevelopment />
  </Layout>
)

export default IndexPage

当我这样做时，它会抛出错误：TypeError: Cannot read property 'github' of undefined。

显然有些东西我不明白，而且我无法在教程中发现任何东西。任何帮助都会很棒。

Answer 1

您好，您似乎正在组件中使用页面查询。对于组件查询，您需要使用 StaticQuery 或 useStaticQuery 挂钩。查看这些文档https://www.gatsbyjs.org/docs/static-query/ & https://www.gatsbyjs.org/docs/use-static-query/