如何发送带有变量的 GraphQL AJAX 查询？答案

【问题标题】：How can I send a GraphQL AJAX query with a variable?如何发送带有变量的 GraphQL AJAX 查询？
【发布时间】：2018-01-12 23:29:57
【问题描述】：

我正在尝试使用 GraphQL 对 GitHub 进行 API 调用，我已经能够使用静态 graphQL 调用成功调用数据，但是我无法在调用中放置变量（var 条目）以便我可以更改调用基于用户将在网络应用中提供的输入。

我正在使用 AJAX 来传递授权令牌。此外，除非查询是 JSON 字符串化，否则调用不起作用（否则会出现 400 错误）。

JSON Stringify 似乎是将变量 'superQuery' 的名称转换为字符串，而不是将 'superQuery' 的值转换为字符串。

如何发送带有可根据用户输入更改的变量的 graphQL 查询？

附： Web 开发的相对菜鸟，对于任何非常明显的错误，我们深表歉意。

这是我目前所拥有的：

var entry = $('#entry').val()

  var superQuery = `{
    repository(name: entry, owner: "******") {
      pullRequests(last: 100) {
        nodes {
          state
          headRepository {
            owner {
             login
            }
           }
          }
         }
        }
       }`

.ajax({
  method: "POST",
  url: "https://api.github.com/graphql",
  contentType: "application/json",
  headers: {
    Authorization: "bearer **********************************"
  },
  data: JSON.stringify({
    query: superQuery
  })
})

【问题讨论】：

标签： jquery json graphql github-api

【解决方案1】：

如果我正确理解您的问题，我相信您想要执行以下操作（假设 entry 是一个字符串）：

 var superQuery = `query repository($entry: String)
         repository(entry: $entry) {
            pullRequests(last: 100) {
               nodes {
                 state
                 headRepository {
                   owner {
                     login
                    } 
                  } 
                } 
             }
          }`

然后是你的数据：

data: JSON.stringify({
   query: superQuery,
   variables: { "entry": $('#entry').val() }
})

【讨论】：

谢谢你，亚历克斯我尝试了你这里的东西，以及它的许多变体，但一直收到一个空对象。
终于弄明白了，你帮我指出了正确的方向。谢谢！这是我的 AJAX 调用中的代码： data: JSON.stringify({ query: query ($entry: String!) {repository(name: $entry, owner: "*****") { pullRequests(last: 100) { nodes { state headRepository { owner { login } } } } } }, variables: { "entry": $('#entry').val() }
完美，很高兴你让它工作，我从来没有直接在 ajax 调用中使用它，但这是有道理的。
我可以用它来突变吗？？？
应该像替换query with mutation @ByeWebster 一样简单。至少它在这里。

【解决方案2】：

对于任何有同样问题的人，当我最终让它工作时，代码如下所示：

      $('button').click(function() {
      event.preventDefault();
      var entry = $('#entry').val()
      console.log(entry);


      $.ajax({
          method: "POST",
          url: "https://api.github.com/graphql",
          contentType: "application/json",
          headers: {
            Authorization: "bearer ***********"
          },
          data: JSON.stringify({
            query: `query ($entry: String!) {repository(name: $entry, 
            owner: "*******") { pullRequests(last: 100) {
              nodes {
                state
                headRepository {
                  owner {
                    login
                  }
                }
              }
            }
          }
        }`,
        variables: {
          "entry": $('#entry').val()
        }
      })
    })

【讨论】：

{"readyState":0,"responseText":"","status":0,"statusText":"error"}