javascript - 在 Gatsby 中出现错误:TypeError:无法读取未定义的属性“github”
问题描述
长期 WordPress 开发人员和 Gatsby/React/GraphQL 菜鸟。
我正在尝试模拟这个Gatsby Github Displayer,它通过 GraphQL 连接到 Github API 并提供有关您的存储库的信息,然后将它们显示在页面上。
我希望做一些稍微不同的事情,并将两个元素都作为组件,然后将其中一个组件显示在我的Gatsby 网站的主页上。
这是我的回购,其中有错误。
这是我的组件:
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:无法读取未定义的属性'github'。
显然有些东西我不理解,而且我无法在教程中发现任何东西。任何帮助都会很棒。
解决方案
您好,您似乎正在组件中使用页面查询。对于组件查询,您需要使用 StaticQuery 或 useStaticQuery 挂钩。查看这些文档https://www.gatsbyjs.org/docs/static-query/和https://www.gatsbyjs.org/docs/use-static-query/
推荐阅读
- algorithm - 在线性时间内验证顶点覆盖
- javascript - 如何从 Objective-C 文件中读取 RGBA 连音并返回可在 JavaScript 中使用的颜色值
- apache-spark - EsHadoopIllegalArgumentException:将 Hadoop 连接到 Elasticsearch 时出现问题
- java - Java 中的 For 循环和数组
- javascript - 如何正确从firebase检索数据?
- android - Andriod Gradle 问题
- php - 给定数组中的开始和结束坐标,标记数组槽以绘制矩形
- spartacus-storefront - 如何编辑默认的 spartacus 断点
- php - 每个未显示在模式弹出窗口中的 PHP
- node.js - 如何通过get方法返回mongodb管道的结果?