Reputation: 11829
I am requesting data from GraphQLHub via XHR:
const query = '{ reddit { subreddit(name: "movies"){ newListings(limit: 2) { title comments { body author { username commentKarma } } } } } }';
const xhr = new XMLHttpRequest();
xhr.open("get", 'https://www.graphqlhub.com/graphql?query=' + encodeURIComponent(query), true);
xhr.responseType = "json";
xhr.onload = () => console.log(xhr.response);
xhr.send();
This works. However I tried converting it into axios like so:
const query = '{ reddit { subreddit(name: "movies"){ newListings(limit: 2) { title comments { body author { username commentKarma } } } } } }';
axios({
url: "https://www.graphqlhub.com/graphql",
method: "get",
data: {
query: encodeURIComponent(query)
}
}).then((result) => {
console.log(result.data);
});
But I am getting this error:
Uncaught (in promise) Error: Request failed with status code 400
Anything wrong with the syntax?
Upvotes: 0
Views: 1495
Reputation: 84877
According to the docs:
data
is the data to be sent as the request body. Only applicable for request methods 'PUT', 'POST', and 'PATCH'.
Since your method for the request is GET
, the data is ignored. You should use params
instead. We also don't need to encode our params, since axios already does this for us.
axios({
url: "https://www.graphqlhub.com/graphql",
method: "get",
params: {
query,
}
})
It's probably better to just use POST instead though, since some servers don't allow mutations to be sent as GET
requests.
axios({
url: "https://www.graphqlhub.com/graphql",
method: "get",
data: {
query,
}
})
Or, better yet, just use a client like Apollo.
Upvotes: 2