f / graphql.js

A Simple and Isomorphic GraphQL Client for JavaScript

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Request payload not compatible with Github API

fabiomolinar opened this issue · comments

I have tried using this repository to query Github's GraphQL API. But no matter what I do, I keep getting a "Problems parsing JSON" message.
An extracted piece of the code below:

var graph = graphql("https://api.github.com/graphql", {
  method: "POST",
  headers: {
    "Authorization": "Bearer <my-token-here>",
    "Content-Type": "application/json"
  },
  fragments: {
    rateLimitInfo: "on RateLimit {cost,remaining,resetAt}"
  }
});
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);
});

With this code I always get a HTTP 400 (Bad Request) response. With the following data:

{
    message: "Problems parsing JSON", 
    documentation_url: "https://developer.github.com/v3"
}

Looking at Chrome's Network tab, I see that the request payload that is being sent is:
query=query%20repo(%24name%3A%20String!%2C%20%24owner%3A%20String!)%7Brepository(name%3A%24name%2C%20owner%3A%24owner)%7Bid%7D%7D&variables=%7B%22name%22%3A%22freeCodeCamp%22%2C%22owner%22%3A%22freeCodeCamp%22%7D
I have the same query running on Insomnia and it works. When I convert Insomnia's request to curl, the payload looks like this:
--data '{"query":"query repo($name: String!, $owner: String!){\n\trepository(name:$name, owner:$owner){\n\t\tid\t\t\n\t}\n}","variables":{"name":"freeCodeCamp","owner":"freeCodeCamp"},"operationName":"repo"}'

When decoding both strings, it is visible that both payloads have different formats.

Is this an issue with how the repository is creating the payload, is this a mistake on my code, or is this something particular to how Github's API accept the query string?

Same question posted on stackoverflow.

Maybe I can implement an option how to send the data.

I have the same issue, any progress on this?

You may need to pass asJSON: true option since default content-type is application/form-data but GH API wants it as application/json.

https://github.com/f/graphql.js#change-post-method