Gatsby - 如何将变量传递给 pageQuery答案

【问题标题】：Gatsby - how to pass variables to pageQueryGatsby - 如何将变量传递给 pageQuery
【发布时间】：2021-02-06 02:42:45
【问题描述】：

我遇到了与How do you pass variables to pageQuery 相同的问题，但由于某种原因解决方案对我不起作用

模板内的console.log显示数据正确传递给组件，pageContext是{cat: "Cat Name", limit: 10}，但查询结果返回的项目类别与应用的过滤器不同。相同的查询工作正常，并在 GraphiQL 资源管理器中返回过滤列表。

我的模板组件：

const Page: FC<unknown> = ({pageContext}): React.ReactElement => {
  const data = useStaticQuery(query)
  console.log(data, query, pageContext)

...

const query = graphql`
  query GetItems($cat: String, $limit: Int) {
    items: allItems(limit: $limit, filter: { category: { eq: $cat } }) {

我的 creatPage 部分：

console.log(cat)
createPage({
      path: `cat/${cat.slug}`,
      component: template,
      context: {
        cat: cat.title,
        limit: 10
      },
    })

所以问题是 - 我做错了什么，我可以做些什么来调试它？

编辑：所以我没有仔细阅读文档，并且useStaticQuery我从其他页面复制粘贴不能接受变量。我试图删除它，但在我的组件中没有得到 data 道具。稍后我将更新问题位，并提供有关我所做更改的更多信息。

【问题讨论】：

好吧，看来我很愚蠢，没有仔细阅读文档。 StaticQuery 不能接受变量

标签： gatsby

【解决方案1】：

假设：

{cat: "Cat Name", limit: 10}

我不知道是不是拼写错误，但title 不是cat 的属性。如果是，请修复它，否则 cat: cat.title 将变为 undefined。

此外，您可以通过手动添加上下文值来创建要在localhost:8000/___graphql 中使用的示例查询：

  query GetItems {
    items: allItems(limit: 10, filter: { category: { eq: "Cat Name"} }) {

     ...
    }

然后，您将能够相应地测试您的预期结果。

【讨论】：

localhost:8000/___graphql 的示例查询是我在Same query works fine and returns filtered list inside GraphiQL explorer. 中提到的 - 像这样测试时效果很好
和 {cat: "Cat Name", limit: 10} 是我编辑的 console.log(data, query, pageContext) 的结果，如果不清楚，抱歉。这是pageContext 部分，我认为应该由 gatsby 传递给 graphql 查询
更新了一些问题以使其更清晰
好吧，看来我很愚蠢，没有仔细阅读文档。 StaticQuery 不能接受变量
正是如此，因此得名。您可以在页面组件上使用页面查询并将数据传递给您的组件