f / graphql.js

A Simple and Isomorphic GraphQL Client for JavaScript

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unable to get any query to run on GitHub's API - `.then` is not a function error

armsp opened this issue · comments

I must admit that I am a beginner with JavaScript and web based technologies.
I followed issues #2 , #21 and #40 along with the code taken straight from this SO answer (corresponding #21), but I get the following error in console -

TypeError: graph(...).then is not a functiongraphql.html:59:4

I made a html file with the following content and all I do is open it in the browser and see the console.
Following is the content of the html file -

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="graphql.min.js"></script>
<script>
var graph = graphql("https://api.github.com/graphql", {
  headers: {
    "Authorization": "Bearer <my id>"
  },
  asJSON: true
});
graph(`
    query repo($name: String!, $owner: String!){
        repository(name:$name, owner:$owner){
            id      
        }
    }
`, {
  name: "freeCodeCamp",
  owner: "freeCodeCamp"
}).then(function(response) {
  console.log(response);
}).catch(function(error) {
  console.log(error);
});
</html>

Could you please tell me how should I make it display the response json in the console ?

Any comments on this? I think many folks have got it working, so it should be easy enough. Any hint would be much appreciated.

try this

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/graphql.js@0.6.5/graphql.min.js"></script>
<script>
var graph = graphql("https://api.github.com/graphql", {
  headers: {
    "Authorization": "Bearer <my id>"
  },
  asJSON: true
});
graph(`
    query repo($name: String!, $owner: String!){
        repository(name:$name, owner:$owner){
            id
        }
    }
`)({
  name: "freeCodeCamp",
  owner: "freeCodeCamp"
}).then(function(response) {
  console.log(response);
}).catch(function(error) {
  console.log(error);
});
</script>
</html>

graph returns a function, you can then call that function with the variables for the gql query.

@tuananh I am sorry to ask this but how exactly do I do that?

@tuananh I am sorry to ask this but how exactly do I do that?

see the code snippet above. it's just a tiny bit different with yours.

try copy again, what i get is 401 error bad cred because i dont have api key

image

@tuananh Got it working. Thanks a lot!!