如何用JavaScript调用GraphQL API？

• Axios
• Fetch
• XMLHttpRequest
• 其他

一旦我们有了一个带有GraphQL API的工作服务器，我们需要一种方法从应用程序访问这些信息。接下来，我将向您展示使用JavaScript查询GraphQL API的不同方法。

我们将使用反引号，即（``）而不是（""）或（''）来表示字符串，因为它们允许我们在JavaScript中放置多行字符串。

Axios

Axios是一个用于发出ajax查询的库。它以其简单性和基于Promises的使用而闻名，此外还支持async和await。

// query for people aged 18
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是用于发出ajax查询的原生JavaScript函数，但是，它在旧浏览器中不受支持。

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

与fetch一样，XMLHttpRequest是原生JavaScript函数，不同的是，与fetch不同，它在旧浏览器中具有更好的支持。

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

其他

我们可以围绕这些查询方法创建函数，允许我们缩短代码并防止我们一遍又一遍地重复相同的内容。我将用axios举一个例子。

// 使用axios查询graphql api的包装器
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));
  });
}

然后我们可以通过以下方式使用此函数

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

这样，我们就可以使用我们喜欢的方法来使用我们的API。

我希望本指南有所帮助。