javascript - 在页面级查询中使用页面的查询参数作为参数

Question

在 gatsbyJS 中有 is a way指定页面级查询，但无论我读过什么，将参数传递给 gatsby 查询的唯一方法是在创建页面时(通过页面上下文)。

例如下面的$slug是在创建页面时传递给页面的。是否有另一种传递 $slug 的方法(可能通过查询参数值)。

export const query = graphql`
  query($slug: String) {
    mdx(frontmatter: {slug: { eq: $slug }}) {
      frontmatter {
        title
        author
      }
      body
    }
  }
`;

Answer 1

I open this new page /search?slug=test and when search loads i read query param slug and use that to query within the graphql query (and load the page)

简短的回答是你不能，因为你在同一个页面上(/search)，它是在构建时使用 Gatsby 页面查询创建和填充的，所以没有您可以使用来自 URL 参数的动态内容更改该“静态”查询的方式。

然而，您可以做的是使用纯 JavaScript 获取 URL 参数并使用动态过滤器更改页面查询的结果并将其显示在 /search 中页面。