Сложные переменные запроса в GraphQL (через Гэтсби)
Я создаю локализованный статический веб-сайт с помощью Gatsby с помощью gatsby-plugin-intl. Этот плагин добавляет контекстную переменную с именем intl на страницы (включая страницы на основе шаблонов), которая является объектом: https://github.com/wiziple/gatsby-plugin-intl/blob/master/src/gatsby-node.js#L27-L34.
Я хотел бы получить доступ к переменной intl.language из контекста в запросе страницы. Это мой (неудачный) код на данном этапе:
query($slug: String!, $intl: String) {
contentfulPerson(slug: {eq: $slug}, node_locale: {eq: $intl.language}) {
name
}
}
Contentful — это безголовая CMS, которую я использую и из которой я хотел бы получать данные в правильной локали.
Очевидно, что у этого кода есть две проблемы: $intl не является строкой и $intl.language синтаксически некорректен. Но я не знаю, как решить обе проблемы.
Думаю, я мог бы либо разветвить плагин, либо сделать что-то свое gatsby-node.js, чтобы сделать язык доступным в качестве переменной верхнего уровня в контексте, но мне интересно узнать, есть ли способ сделать это напрямую.
В документах Gatsby говорится, что переменные запроса могут быть сложными (https://www.gatsbyjs.org/docs/graphql-reference/#query-переменные), но в приведенном ими примере не показано, как определяются типы или как получить доступ к свойству в этих переменных.
Обновлено: я попытался переместить язык в переменную контекста верхнего уровня в моем gatsby-node.js, используя этот код:
exports.onCreatePage = ({page, actions}) => {
const { createPage, deletePage } = actions
deletePage(page)
createPage({
...page,
context: {
...page.context,
language: page.context.intl.language
}
})
}
но программе не хватает памяти (даже при увеличении max_old_space_size)
Спасибо за ссылку @FranklinFarahani. Я сталкивался с этим, но, к сожалению, в этом случае язык доступен напрямую как переменная верхнего уровня, что упрощает запрос.
Ответы 1
Вы можете переместить поле language в контекст верхнего уровня, выполнив следующие действия:
exports.onCreatePage = ({ page, actions }) => {
const { createPage, deletePage } = actions
const oldPage = Object.assign({}, page)
page.context.language = page.context.intl.language;
if (page.context.language !== oldPage.context.language) {
// Replace new page with old page
deletePage(oldPage)
createPage(page)
}
}
Проверка того, изменилось ли поле, позволяет избежать бесконечного цикла.
Отлично сработано! Спасибо :)
Работал как шарм!
Это не проблема, с которой мне приходилось сталкиваться лично, но я провел некоторое исследование по этому вопросу. Я думаю, просмотр это репо может помочь вам решить вашу проблему. Вы можете посмотреть на
pages/index.jsxпозже, чтобы увидеть, как они запросили его.