我在过滤GatsbyJS中的GraphQL查询中的项目时遇到了麻烦。我以为可以在context
的{{1}}部分中创建键值对(例如下面的createPage
和currentDate
),然后将它们用作页面组件中的参数,但是似乎不起作用。
在minusFiveDays
中:
gatsby-node.js
在我的 const currentDate = moment().format('YYYY-MM-DD');
const minusFiveDays = moment()
.subtract(5, 'days')
.format('YYYY-MM-DD');
console.log('DATE', minusFiveDays); // this logs correctly
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.slug,
component: someContentTypeTemplate,
context: {
// Can the names passed in here be accessed in
// graphql queries, prefixed with a dollar sign?
currentDate: currentDate,
minusFiveDays: minusFiveDays,
},
});
});
文件中:
src/pages/someContentType.js
即使我像这样对它进行硬编码,它也不起作用,因此上下文似乎并没有传递到组件的GraphQL查询中:
// TODO: this query doesn't work. No matter what condition I try to use
// for $minusFiveDays, it doesn't affect the output. The query does work in
// graphiql when I hard-code a string there like "2018-11-01".
export const pageQuery = graphql`
query($minusFiveDays: Date) { // this is the key from the file above
allMarkdownRemark(
filter: {
frontmatter: {
content_type: { eq: "some_content_type" }
start_date: { ne: null, gte: $minusFiveDays }
}
}
sort: { order: ASC, fields: [frontmatter___start_date] }
) {
edges {
node {
id
frontmatter {
created_at
slug
title
start_date(formatString: "DD MMMM YYYY")
end_date
}
}
}
}
}
`;
这在GraphiQL中起作用:
context: {
currentDate: currentDate,
minusFiveDays: "2018-11-01",
},
我认为我的语法一定是错误的,但是我是GraphQL和Gatsby的新手,并且没有错误消息。 编辑:将{
allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "some_content_type"}, start_date: {ne: null, gte: "2018-11-01"}}}, sort: {order: DESC, fields: [frontmatter___start_date]}) {
edges {
node {
id
frontmatter {
created_at
slug
title
start_date(formatString: "DD MMMM YYYY")
end_date
}
}
}
}
}
更改为Date
时出现错误消息:Date!
答案 0 :(得分:0)
我认为可能是因为您从此行获得的价值是
const minusFiveDays = moment().subtract(5, 'days').format('YYYY-MM-DD');
不是Date
类型。从控制台的一个小试验来看,它似乎是一个字符串。
如果改为将其更改为:
$minusFiveDays: String!
这可能有用,但看不到我无法确定的项目。
答案 1 :(得分:0)
我相信问题在于您的模板位于 src/pages
目录中。
*.js
中的 src/pages
文件将自动构建到页面中,包括模板someContentType.js
。这意味着Gatsby会在您createPage
进行的自定义gatsby-node.js
调用之外,自动为您生成此页面。
但是,当盖茨比自动生成此页面时,它不知道您通过createPage
传递的上下文。这就是为什么它不起作用的原因。
将模板移至src/pages
之外可能会解决您的问题。