How can I send a GraphQL AJAX query with a variable?

Question

I am trying to make an API call to GitHub using GraphQL, I have been able to successfully call data with a static graphQL call, however I am having trouble putting a variable (var entry) in my call so that I can change the call based on an input a user would provide in the web app.

I am using AJAX to be able to pass the authorization token. Additionally, the call does not work unless the query is JSON stringified (gets 400 error otherwise).

The JSON Stringify seems to turn the name of the variable 'superQuery' into a string rather than turning the value of 'superQuery' into a string.

How can I send a graphQL query with a variable that can change based on user input?

P.S. Relative noob to web development, apologies for any super obvious mistakes.

Here is what I have so far:

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
  })
})

score 9 · Answer 1 · edited Jun 09 '23 at 13:08

For anyone with the same problem, here is what the code looked like when I finally got it to work:

      $('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"} — giuseppe, Mar 03 '21 at 18:20

score 0 · Answer 2 · edited Jul 02 '21 at 19:21

0

If I understand your question correctly, I believe you want to do the following (assuming entry is a string):

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

And then for your data:

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

edited Jul 02 '21 at 19:21

penguin

628
2
10
22

answered Aug 05 '17 at 04:54

Alex K

832
4
8

Thank you, Alex I tried what you have here, along with a number of variations of it, but kept receiving a null object. – Jonathan Herring Aug 06 '17 at 17:17
Finally got it figured out, you helped point me in the right direction. Thanks! Here is the code in my AJAX call: data: JSON.stringify({ query: `query ($entry: String!) {repository(name: $entry, owner: "*****") { pullRequests(last: 100) { nodes { state headRepository { owner { login } } } } } }`, variables: { "entry": $('#entry').val() } – Jonathan Herring Aug 06 '17 at 17:33
Perfect, glad you got it working, I have never used it directly in an ajax call, but that makes sense. – Alex K Aug 06 '17 at 21:13
1

can i use this for mutation..?? – Iam ByeBlogs Feb 14 '18 at 03:38
Should be as simple as replacing `query with `mutation @ByeWebster. At least it was here. – jiku Nov 26 '19 at 20:14
for fetch in browsers, just replace data with body. – jiku Nov 26 '19 at 20:15

How can I send a GraphQL AJAX query with a variable?

2 Answers2

Linked