如何解决在Gatsby中将变量传递到GraphQL查询中
我想限制在索引页面上获取的帖子数量。当前,页数已硬编码到GraphQL查询中。
query {
allMarkdownRemark(limit: 5,sort: { fields: [frontmatter___date],order: DESC }) {
totalCount
edges {
node {
...
}
}
}
}
我想用变量的值替换“ 5”。字符串插值不能与graphql
函数一起使用,因此我必须使用另一种方法。
是否有一种方法可以实现并将变量传递到GatsbyJS中的GraphQL查询中?
解决方法
您只能通过上下文将变量传递给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 {
...
}
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。