我试图将我的index.js页面链接到文章模板,以使用slug和createPages
显示来自中间件Drupal站点的数据。我在index.js页面上正确显示数据,并且在将文件路径更改为createPages
后,我的./src/templates/article.js
似乎没有任何错误。
我在编译时遇到了这个GraphQL错误:
错误GraphQL错误编译站点的GraphQL查询时出错。错误:RelayParser:遇到1个错误: - 未知参数'slug'。来源:文件
usersBrooksrelytHtdocsRepositoryGatsbyGraphqlGatsbySrcTemplatesArticleJs4119530598
文件:GraphQL request
GraphQL request (3:12) 2: query($slug: String!) { 3: umdHub(slug: { eq: $slug }) { ^ 4: articles {
我的article.js代码:
import React from 'react'
import { graphql } from 'gatsby'
import { ListGroup, ListGroupItem } from 'reactstrap';
// eslint-disable-next-line
import Layout from "../components/layout"
import Header from "../components/header"
import Footer from "../components/footer"
export default ({ data }) => {
return (
<div>
<Header />
<div className="container spaces article">
<div className="row">
<section className="col-md-9">
<div className="tag-list">
<ul class="list-inline">
<li class="list-inline-item"><a href="/">Highlighted</a></li>
<li class="list-inline-item"><a href="/">Innovation</a></li>
<li class="list-inline-item"><a href="/">Web Only</a></li>
<li class="list-inline-item">February 28, 2019</li>
</ul>
</div>
<h1>{data.title}</h1>
{data.hero_image.map((hero, i) => (
<div key={i}>
<img className="img-fluid no-pad-top med-spaces" src={hero.url_1200_630} alt=" " />
</div>
))}
<div className="row article-content">
<div className="col-md-10 offset-md-1">
<h2 className="subheader">{data.subtitle}</h2>
<div className="author">
<p>By <a href="/">Jane Doe</a> | Photos by <a href="/">ISTOCK</a></p>
<hr />
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
<aside className="col-md-3">
<div>
<ListGroup flush>
<ListGroupItem disabled tag="a" href="#">Recent Posts</ListGroupItem>
<ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
<span>February 27, 2019</span>
<ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
<span>February 27, 2019</span>
<ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
<span>February 27, 2019</span>
<ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
<span>February 27, 2019</span>
</ListGroup>
</div>
</aside>
</div>
</div>
<Footer />
</div>
)
}
export const query = graphql`
query($slug: String!) {
umdHub(slug: { eq: $slug }) {
articles {
data {
id
title
subtitle
body
summary
hero_image {
url_1200_630
}
authorship_date {
formatted_short
unix
unix_int
formatted_long
formatted_short
time
}
slug
}
}
}
}
`
我的gatsby-node.js:
const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
const articleTemplate = path.resolve(`./src/templates/article.js`)
return graphql(`
{
umdHub {
articles {
data {
id
title
subtitle
body
summary
hero_image {
url_1200_630
}
authorship_date {
formatted_short
unix
unix_int
formatted_long
formatted_short
time
}
slug
}
}
}
}
`).then(result => {
if (result.errors) {
throw result.errors
}
result.data.umdHub.articles.data.forEach(data => {
createPage({
path: `${data.slug}`,
component: articleTemplate,
context: {
},
})
})
})
}
filter
的快捷方式仅适用于直接节点的字段,即您可以通过umdHub
过滤articles
。所以当你用slug过滤时,它会在slug
中查找字段umdHub
,因为slug在umdHub.articles.data
下而不存在。
这可能有所帮助:
export const query = graphql`
query($slug: String!) {
- umdHub(slug: { eq: $slug }) {
+ umdHub(articles: { data: { slug: { eq: $slug } } }) {
articles {
data {
slug
}
}
}
}