如何在 axios 中发出 GraphQL 请求 - JavaScript

介绍

GraphQL 是一种 API 查询语言，它提供了一种更高效、更强大的替代方案，可以与 REST API 相比提供更好的灵活性和可扩展性。axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。本文将介绍如何在 axios 中发出 GraphQL 请求。

安装

需要安装 axios 和 graphql 两个库，可以使用 npm 或 yarn 进行安装。

npm install axios graphql --save

或

yarn add axios graphql

导入

导入 axios 和 graphql。

import axios from "axios";
import { GraphQLClient, gql } from "graphql-request";

发送请求

将 GraphQL 查询和变量放入 gql 模板字符串中，然后将它们传递给 GraphQLClient。然后使用 axios 发送请求，并将响应返回给客户端。

const endpoint = "https://api.example.com/graphql";
const graphQLClient = new GraphQLClient(endpoint, { headers: {} });

const query = gql`
  query GetViewer($id: ID!) {
    viewer(id: $id) {
      id
      name
      email
    }
  }
`;

const variables = {
  id: "1234567890",
};

graphQLClient.request(query, variables).then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

结论

在 axios 中发出 GraphQL 请求非常简单，只需要将查询和变量附加在 gql 模板字符串中，然后将它们传递给 GraphQLClient 。然后使用 axios 发送请求，并将响应返回给客户端。GraphQL 在构建大规模 API 时具有许多优势，特别是在可扩展性和灵活性方面。