Question

我在过滤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!

Answer 1

我认为可能是因为您从此行获得的价值是

const minusFiveDays = moment().subtract(5, 'days').format('YYYY-MM-DD');

不是Date类型。从控制台的一个小试验来看，它似乎是一个字符串。

如果改为将其更改为：

$minusFiveDays: String!

这可能有用，但看不到我无法确定的项目。

Answer 2

我相信问题在于您的模板位于 src/pages 目录中。

*.js中的

src/pages文件将自动构建到页面中，包括模板someContentType.js。这意味着Gatsby会在您createPage进行的自定义gatsby-node.js调用之外，自动为您生成此页面。

但是，当盖茨比自动生成此页面时，它不知道您通过createPage传递的上下文。这就是为什么它不起作用的原因。

将模板移至src/pages之外可能会解决您的问题。

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

2 个答案: