Question

我正在寻找有关从GatsbyJS中的表单接受用户输入并将其传递给我的GraphQL查询的示例/教程。

我可以在提交时获得用户输入，还可以在测试graphiql时传递变量，我只是不知道如何将两者结合起来。

我的数据存储在Drupal中，是食谱列表。

我希望用户能够输入一种成分，例如鸡肉，然后检索所有以鸡肉为原料的食谱。

我的查询是

query SearchPageQuery($ingredient: String) {
  allNodeRecipes(filter: {relationships: {field_ingredients: {elemMatch: {title: {eq: $ingredient}}}}}) {
    edges {
      node {
        id
        title
        path {
          alias
        }
        relationships {
          field_ingredients {
            title
          }
        }
      }
    }
  }
}

Answer 1

如果我正确地理解了您的问题，那么简短的答案是您不会，但是另一种方法可能对您有用。

Gatsby的GraphQL查询是作为站点静态版本的一部分预先运行的，因此数据是客户端JavaScript的一部分，但该查询已经在该点运行了。

这与您不能在StaticQuery中使用JavaScript模板文字的原因相同：

// This doesn’t work
let myDynamicSlug = 'home'

return (
  <StaticQuery
    query={graphql`
query ExampleQuery {
  examplePage(slug: { eq: ${myDynamicSlug} }) {
    title
  }
}
`}
    render={data => {
      console.log(data)
    }}
  />
)

您将收到一条错误消息，说明“ graphql片段中不允许使用字符串插值。”进一步阅读：https://github.com/gatsbyjs/gatsby/issues/2293

最近我遇到了类似的问题，并且我意识到为什么您不能这样做在很大程度上很有意义。如果是，例如使用GraphQL中的查询来生成图像以及类似的操作，您无法传递客户端变量，因为所有的“静态站点” Gatsby操作（例如处理图像）都已经完成了。

对我有用的是获取查询中所需的大部分数据，并在其中找到所需的数据。在我之前的示例中，这可能意味着获取allExamplePages而不是一个examplePage，然后在其中找到我需要的myDynamicSlug：

// This isn’t exactly how you’d hope to be able to do it,
// but it does work for certain problems
let myDynamicSlug = 'home'

return (
  <StaticQuery
    query={graphql`
query ExampleQuery {
  # You might still be able to limit this query, ex. if you know your item
  # is within the last 10 items or you don’t need any items before a certain date,
  # but if not you might need to query everything
  allExamplePages() {
    edges {
      node {
        title
        slug
      }
    }
  }
}
`}
    render={data => {
      // Find and use the item you want, however is appropriate here
      data.edges.forEach(item => {
        if (item.node.slug === myDynamicSlug) {
          console.log(item)
        }
      })
    }}
  />
)

在您的情况下，希望有一个等效的ex。根据用户输入查找内容。如果您可以更具体地说明数据的结构，我们很乐意尝试使我的建议更具体。希望有帮助！

GatsbyJS将用户输入传递给GraphQL

1 个答案: