在 Gatsby 中将变量传递给 GraphQL 查询答案

【问题标题】：Passing Variables into GraphQL Query in Gatsby在 Gatsby 中将变量传递给 GraphQL 查询
【发布时间】：2020-11-30 19:58:19
【问题描述】：

我想限制在我的索引页面上获取的帖子数量。目前，页面数被硬编码到 GraphQL 查询中。

query {
    allMarkdownRemark(limit: 5, sort: { fields: [frontmatter___date], order: DESC }) {
      totalCount
      edges {
        node {
          ...
        }
      }
    }
  }

我想用变量的值替换“5”。字符串插值不适用于graphql 函数，所以我必须使用另一种方法。

有没有办法实现这一点并将变量传递到 GatsbyJS 中的 GraphQL 查询中？

【问题讨论】：

标签： graphql gatsby

【解决方案1】：

您只能通过上下文将变量传递给 GraphQL 查询，因为字符串插值不能以这种方式工作。在page query（而不是静态查询）中，您可以使用context 对象作为createPage API 的参数传递一个变量。因此，您需要将此页面创建添加到您的 gatsby-node.js 并使用以下内容：

const limit = 10;

page.forEach(({ node }, index) => {
  createPage({
    path: node.fields.slug,
    component: path.resolve(`./src/pages/index.js`), // your index path
    // values in the context object are passed in as variables to page queries
    context: {
      limit: limit,
    },
  })
})

现在，您的 context 对象中有一个 limit 值，其中包含所有必需的逻辑（现在它是一个简单的数字，但您可以在那里添加一些计算）。在你的index.js:

query yourQuery($limit: String) {
    allMarkdownRemark(limit: $limit, sort: { fields: [frontmatter___date], order: DESC }) {
      totalCount
      edges {
        node {
          ...
        }
      }
    }
  }

【讨论】：