如何将javascript变量传递给graphql查询？答案

【问题标题】：How to pass javascript variable to graphql query?如何将javascript变量传递给graphql查询？
【发布时间】：2022-01-24 08:38:59
【问题描述】：

我有一个超级简单的 GraphQl 查询，但我无法根据输入使查询动态化。假设您将在 javascript 中获得一个要传递给查询的字符串，它是如何完成的？以下面的示例为例，我将如何替换产品中 Sku 字段上的硬编码字符串“3111”，而是插入变量 myString 中的值？当我尝试传递它时，我只是收到错误。

let myString = "3111"

`query getProductBySku {
        site {
          product(sku: "3111") {
            id
            entityId
            name
            sku
          }
        }
      }`

【问题讨论】：

标签： javascript reactjs graphql graphql-js

【解决方案1】：

看看这里：https://graphql.org/graphql-js/passing-arguments/

在您的情况下：

var query = `query getProductBySku($sku: String) {
        site {
          product(sku: $sku) {
            id
            entityId
            name
            sku
          }
        }
      }
`;

fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({
    query,
    variables: { "3111" }, // this refers to SKU
  })
})
  .then(r => r.json())
  .then(data => console.log('data returned:', data));

除了创建一个允许参数传递的查询之外，您还需要一个带有主体设置的 POST 请求，以容纳预期会实现的输入

【讨论】：

不应该是variables: { sku : "3111" }吗？
@andymccullough 是的，我是这么认为的。如果您打开它报告的官方文档的链接，您可以使用位置参数。无需声明您所指的具体参数。