GraphQL 中的复杂查询变量（通过 Gatsby）

Question

我正在 gatsby-plugin-intl 的帮助下使用 Gatsby 构建本地化静态网站。这个插件给页面（包括基于模板的页面）添加了一个名为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-variables)，但在它们提供的示例中，它们没有显示类型是如何定义的或如何访问这些变量中的属性。

编辑：我尝试使用以下代码将语言移动到 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）

Answer 1

您可以通过这样做将 language 字段移动到 top-level 上下文：

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

检查字段是否已更改可避免无限循环。

GraphQL 中的复杂查询变量（通过 Gatsby）

Complex query variables in GraphQL (via Gatsby)

graphql

gatsby