GraphQL：如何构建 Ajax + GraphQL 的第一步

在现代 Web 应用程序开发中，前端开发人员需要处理大量的数据。为了更好地管理和处理数据，人们使用了各种技术和工具。其中一个重要的技术是 GraphQL。

GraphQL 是一种数据查询语言和运行时，旨在提供对 Web 应用程序中的数据的完全和可预测的访问。使用 GraphQL，开发人员可以定义数据模型和查询模式，并通过单个 API 端点访问数据。这种方法提供了更高效、更灵活和更可靠的数据获取方式。

在本文中，我们将介绍如何使用 Ajax 和 GraphQL 构建 Web 应用程序的第一步。我们将讨论如何设置 GraphQL API 端点以及如何使用 Ajax 发送 GraphQL 查询。我们还将提供一个示例代码，以帮助您更好地理解这个过程。

设置 GraphQL API 端点

首先，我们需要设置一个 GraphQL API 端点。这个端点将处理所有的 GraphQL 查询，并返回所需的数据。您可以使用任何 GraphQL 实现，例如：

• Apollo Server
• GraphQL Yoga
• Express GraphQL

在本文中，我们将使用 Apollo Server 作为我们的 GraphQL 实现。要设置 Apollo Server，您需要执行以下步骤：

1. 安装 Apollo Server：

npm install apollo-server

1. 创建一个 GraphQL Schema：

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

1. 创建一个 Resolver：

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

1. 创建一个 Apollo Server：

const { ApolloServer } = require('apollo-server');

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

这将在 http://localhost:4000 上启动一个 Apollo Server，并且您可以通过浏览器访问它。

使用 Ajax 发送 GraphQL 查询

现在，我们已经设置了 Apollo Server，我们可以使用 Ajax 发送 GraphQL 查询。要使用 Ajax，我们需要执行以下步骤：

1. 安装 Axios：

npm install axios

1. 创建一个 GraphQL 查询：

const query = `
  {
    hello
  }
`;

1. 发送 GraphQL 查询：

const axios = require('axios');

axios.post('http://localhost:4000/graphql', { query }).then((response) => {
  console.log(response.data);
});

这将发送一个 GraphQL 查询到 http://localhost:4000/graphql，并返回响应数据。

示例代码

下面是一个完整的示例代码，它演示了如何使用 Ajax 和 GraphQL 构建 Web 应用程序的第一步：

-- -------------------- ---- -------
----- - --- - - -------------------------
----- - ------------ - - -------------------------
----- ----- - -----------------

-- ---- -- ------ - ------- ------
----- -------- - ----
  ---- ----- -
    ------ ------
  -
--

-- ---- -- ------ - --------
----- --------- - -
  ------ -
    ------ -- -- ------ --------
  --
--

-- ---- -- ------ -- ------ ------
----- ------ - --- -------------- --------- --------- ---

----------------------- --- -- -- -
  --------------- ------ ----- -- ---------

  -- ---- -- ---- - ------- ----- ----- ----
  ----- ----- - -
    -
      -----
    -
  --

  ---------------------------- - ----- ------------------ -- -
    ---------------------------
  ---
---
展开代码

总结

在本文中，我们介绍了如何使用 Ajax 和 GraphQL 构建 Web 应用程序的第一步。我们讨论了如何设置 GraphQL API 端点以及如何使用 Ajax 发送 GraphQL 查询。我们还提供了一个示例代码，以帮助您更好地理解这个过程。希望这篇文章对您有所帮助，让您能够更好地管理和处理数据。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66123f28d10417a2222d7dfc