Como chamar uma API GraphQL com JavaScript?

• Axios
• Fetch
• XMLHttpRequest
• Diversos

Uma vez que temos um servidor funcional com uma API GraphQL, precisamos de uma maneira de acessar essas informações a partir da nossa aplicação. A seguir, mostrarei diferentes maneiras de consultar uma API GraphQL usando JavaScript.

Usaremos crases, ou seja, (` `) em vez de (" ") ou (' ') para strings, pois elas nos permitem colocar strings de várias linhas em JavaScript.

Axios

Axios é uma biblioteca para fazer consultas ajax. É popular por sua simplicidade e seu uso baseado em Promises, além de ter suporte para async e await.

// consulta para pessoas com 18 anos
axios({
  url: 'http://localhost:4000/graphql', 
  method: 'POST',
  data: {
    query: `
      query {
        people(age: 18) {
          id
          name
          surname
          age 
          hobbies
        }
      }
    `,
  },
})
  .then((res) => console.log(res.data))
  .catch((err) => console.log(err));

Fetch

Fetch é uma função nativa do JavaScript para fazer consultas ajax, no entanto, não tem suporte em navegadores mais antigos.

fetch('http://localhost:4000/graphql', {
  method: 'POST', 
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    query: `
    query {
      person(id: 1) {
        id
        name
        surname
        hobbies
      }
    }
  `,
  }),
})
  .then((res) => res.json())
  .then((res) => console.log(res));

XMLHttpRequest

Como fetch, XMLHttpRequest é uma função nativa do JavaScript, exceto que, ao contrário de fetch, tem muito melhor suporte para navegadores mais antigos.

let query = {
  query: `
    query {
      person(id: 1) {
        id
        name 
        surname
        hobbies
      }
    }`,
};

let xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open('POST', 'http://localhost:4000/graphql');
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function () {
  console.log(xhr.response);
};

xhr.send(JSON.stringify(query));

Diversos

Podemos criar funções em torno desses métodos de consulta que nos permitem encurtar o código e evitar que repitamos a mesma coisa várias vezes. Mostrarei um exemplo com axios.

// wrapper para consultar uma api graphql com axios
function gql(query) {
  return new Promise((resolve, reject) => {
    axios({
      url: 'http://localhost:4000/graphql',
      method: 'POST',
      data: { query },
    })
      .then((res) => resolve(res.data['data']))
      .catch((err) => reject(err));
  });
}

Então poderíamos usar esta função da seguinte maneira

gql(`
  query {
    person(id: 1) {
      id
      name
      surname
      hobbies 
    }
  }
`)
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

Dessa forma, podemos consumir nossa API com o método de nossa preferência.

Espero que este guia seja útil.