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

Question

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

在我的React组件中，我可以看到limit属性是通过"props.pageContext.limit“传入的。我需要获取这个限制值，并将其传递给React组件底部的GraphQL查询

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

//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查询时，才会使用指定的参数自动执行这些查询。在您的示例中，如果该查询存在于./src/templates/page.js中，则将执行该查询。然后，您可以通过props将数据传递给子组件。

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

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

有用的链接：

useStaticQuery hook

StaticQuery component

Query Fragments