GraphQL Аргументы в GatsbyJS из контекста в gatsby-node.js

Question

У меня проблемы с фильтрацией элементов в запросе GraphQL в GatsbyJS. Я подумал, что смогу создать пары ключ-значение в context разделе 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 файле:

// 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.

Answer 1

Мне кажется, проблема в том, что ваш шаблон находится в каталоге src/pages.

*.js файлы внутри src/pages будут автоматически встроены в страницы, включая ваш шаблон someContentType.js. Это означает, что Гэтсби генерирует эту страницу автоматически для вас, поверх пользовательских createPage вызовов, которые вы сделали в gatsby-node.js.

Однако, когда Гэтсби генерирует эту страницу автоматически, он не знает о контексте, который вы передали через createPage. Вот почему это не работает.

Перемещение шаблона за пределы src/pages, скорее всего, решит вашу проблему.

Answer 2

Я думаю, это может быть связано с тем, что значение, которое вы получаете из этой строки:

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

не относится к типу Date.Из небольшой пробной версии в консоли это выглядит как строка.

Если вместо этого изменить ее на:

$minusFiveDays: String!

Это может работать, не видя ваш проект, я не могу сказать наверняка.