Question

我正在尝试在我的React组件中构造一个GraphQL查询，我需要限制返回结果的数量。我正在gatsby-node.js文件的“ createPage”函数的“ context”属性内设置极限值。

在我的React组件中，可以看到limit属性是通过“ props.pageContext.limit”传递的。我需要使用此极限值，并将其传递到我的React组件底部的GraphQL查询中

下面是我尝试过的方法，但是它不起作用，如果我从查询中省略了限值，则它将返回所有结果。

//gatsby-node.js
...    
    const postsPerPage = 3;
    createPage({
      path: node.fields.slug,
      component: path.resolve("./src/templates/page.js"),
      context: { 
                 limit: postsPerPage,
                 slug: node.fields.slug,
                 category: node.frontmatter.category
               }  
      });
...


//my-component.js
...
    export const query = graphql`
        query($limit: Int!, $slug: String!) {
          markdownRemark(fields: { slug: { eq: $slug } }) {
            html
            frontmatter {
              category
            }
          }
          allMarkdownRemark(limit: $limit) {
            edges {
              node {
                frontmatter {
                  title
                  excerpt
                }
                fields {
                    slug
                }
              }
            }
          }
        }
      `

Answer 1

GraphQL查询仅在从页面模板组件中导出时才使用指定的参数自动执行。对于您而言，如果此查询存在于GSMServer server(80); serer.begin(); GSMClient client = server.available(); client.println("HTML CODE HERE");中，则将执行查询。然后，您可以通过道具将数据传递给子组件。

您的查询当前被忽略，因为Gatsby不会自动在非页面组件中执行查询。您可以使用./src/templates/page.js组件或StaticQuery挂钩从子组件中查询数据。但是，顾名思义，这些是静态查询，不接受任何参数。

如果您真的希望在子组件中描述查询，还可以查看useStaticQuery，这是将大型查询分为多个可重用部分的一种方式。

有用的链接：

useStaticQuery hook

StaticQuery component

Query Fragments

在React组件GraphQL查询中使用GraphQL上下文变量

1 个答案: