Преобразование XHR-запроса в axios для запроса данных с сервера GraphQL - PullRequest
Новая
       17

Преобразование XHR-запроса в axios для запроса данных с сервера GraphQL

0 голосов
/ 03 марта 2019

Я запрашиваю данные из GraphQLHub через 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();

Это работает.Однако я попытался преобразовать его в axios следующим образом: 

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

Но я получаю эту ошибку: 

Uncaught (in promise) Error: Request failed with status code 400

Что-то не так с синтаксисом?

1 Ответ

0 голосов
/ 03 марта 2019

Согласно документам:

data - данные, которые будут отправлены как тело запроса.Применимо только для методов запроса «PUT», «POST» и «PATCH».

Поскольку ваш метод запроса - GET, данные игнорируются.Вы должны использовать params вместо этого.Нам также не нужно кодировать наши параметры, поскольку axios уже делает это для нас. 

axios({
  url: "https://www.graphqlhub.com/graphql",
  method: "get",
  params: {
    query,
  }
})

Возможно, вместо этого лучше просто использовать POST, поскольку некоторые серверы не разрешают отправлять мутации какGET запросов. 

axios({
  url: "https://www.graphqlhub.com/graphql",
  method: "get",
  data: {
    query,
  }
})

Или, что еще лучше, просто используйте клиент типа Apollo .

...