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

【问题标题】：GraphQL Arguments in GatsbyJS from context in gatsby-node.jsGatsbyJS 中的 GraphQL 参数来自 gatsby-node.js 中的上下文
【发布时间】：2019-10-20 06:18:39
【问题描述】：

我在 GatsbyJS 的 GraphQL 查询中过滤项目时遇到问题。我想我可以在createPage 的context 部分创建键值对（如下面的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 文件中：

// 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
                    }
                }
            }
        }
    }
`;

即使我像这样对其进行硬编码，它也不起作用，因此上下文似乎没有被传递到组件的 GraphQL 查询中：

                context: {
                    currentDate: currentDate,
                    minusFiveDays: "2018-11-01",
                },

这确实在 GraphiQL 中工作：

{
    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
                    }
            }
        }
    }
}

我认为我的语法一定是错误的，但是我是 GraphQL 和 Gatsby 的新手，并且没有错误消息。 编辑：当我将Date 更改为Date! 时出现错误消息：Variable "$minusFiveDays" of required type "Date!" was not provided.

【问题讨论】：

Date 在someContentType.js 中来自哪里？
在上面最上面的sn-p的前两行中定义了。
对不起，我想我误解了。您是指参数中的Date 吗？我认为这告诉 graphql 它应该期待一个日期而不是字符串之类的东西。我还尝试Date! 使其成为必填字段，但它显示“错误：未提供所需类型“日期！”的变量“$minusFiveDays”。它没有被传入。
会不会是您的矩格式 ('YYYY-MM-DD') 与您的 graphQl 格式 "DD MMMM YYYY" 不兼容？
我不认为这是问题所在，因为当我对其进行硬编码时，它在 graphiql 中有效（例如：gist.github.com/j127/038d832291cf69fffc5b1b90557f10cd）。错误消息是未提供该变量。我尝试更改它以使格式匹配，但错误消息没有改变。

标签： graphql gatsby

【解决方案1】：

我认为这可能是因为您从这一行获得的价值：

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

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

如果改为：

$minusFiveDays: String!

它可能会起作用，但我无法确定没有看到你的项目。

【讨论】：

谢谢。我试过了，但错误信息变为：GraphQL Error Variable "$minusFiveDays" of type "String!" used in position expecting type "Date".
在 graphiql 中，我可以将日期作为字符串进行过滤：start_date: {ne: null, gte: "2018-11-01"}。它必须从传入的字符串中解析日期。

【解决方案2】：

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

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

但是，当 Gatsby 自动生成此页面时，它不知道您通过 createPage 传入的上下文。这就是它不起作用的原因。

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

【讨论】：