GatsbyJS中的GraphQL参数来自gatsby-node.js中的上下文

时间:2019-06-04 17:20:11

标签: graphql gatsby

我在过滤GatsbyJS中的GraphQL查询中的项目时遇到了麻烦。我以为可以在context的{​​{1}}部分中创建键值对(例如下面的createPagecurrentDate),然后将它们用作页面组件中的参数,但是似乎不起作用。

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!

2 个答案:

答案 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之外可能会解决您的问题。