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

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

标签： javascriptreactjsgatsby

Answer 1

仅当从页面模板组件导出时，GraphQL 查询才会使用指定的参数自动执行。在您的情况下，如果此查询存在于 中./src/templates/page.js，则将执行该查询。然后，您可以通过道具将数据传递给子组件。

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

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

有用的链接：

使用静态查询钩子

静态查询组件

查询片段