如何在 Express 中集成 Apollo Server，并在前端执行 GraphQL 查询

在现代 Web 开发中，GraphQL 已成为替代传统 REST API 的强大工具。
Apollo Server 是最流行的 GraphQL 服务器框架之一，通常与 Express 结合使用。

本篇文章将详细讲解如何：
✅ 在 Express 中集成 Apollo Server
✅ 使用多个 Express 中间件（CORS、Body Parser、日志记录）
✅ 在前端执行 GraphQL 查询（Apollo Client & Fetch API）

无论你是后端开发者还是前端开发者，这篇文章都能帮助你快速掌握 Express + Apollo Server + GraphQL 查询 的完整流程！🚀

1. 在 Express 中集成 Apollo Server

1.1 安装依赖

首先，我们需要安装以下依赖：

npm install express apollo-server-express graphql cors body-parser morgan

或者使用 yarn：

yarn add express apollo-server-express graphql cors body-parser morgan

1.2 创建 Express 服务器并集成 Apollo Server

在 server.js 文件中编写以下代码：

import express from "express";
import { ApolloServer, gql } from "apollo-server-express";
import cors from "cors";
import bodyParser from "body-parser";
import morgan from "morgan";

// 1️⃣ **定义 GraphQL Schema**
const typeDefs = gql`
  type Query {
    getUser(id: ID!): User
  }

  type User {
    id: ID!
    name: String!
    posts: [Post!]!
  }

  type Post {
    id: ID!
    title: String!
    content: String
  }
`;

// 2️⃣ **模拟数据库**
const users = [
  {
    id: "123",
    name: "张三",
    posts: [
      { id: "1", title: "第一篇文章", content: "这是第一篇文章的内容。" },
      { id: "2", title: "第二篇文章", content: "这是第二篇文章的内容。" }
    ]
  }
];

// 3️⃣ **定义 Resolvers**
const resolvers = {
  Query: {
    getUser: (_, { id }) =>users.find(user => user.id === id) || null
  }
};

// 4️⃣ **创建 Express 应用**
const app = express();

// 5️⃣ **注册 Express 中间件**
app.use(cors()); // 允许跨域请求
app.use(bodyParser.json()); // 解析 JSON 请求体
app.use(morgan("dev")); // 记录 HTTP 请求日志

// 6️⃣ **创建 Apollo Server**
const server = new ApolloServer({ typeDefs, resolvers });

// 7️⃣ **启动 Apollo Server 并绑定到 Express**
await server.start();
server.applyMiddleware({ app }); // Apollo GraphQL 作为中间件

// 8️⃣ **启动 Express 服务器**
app.listen(4000, () => {
  console.log(`🚀 服务器运行在 http://localhost:4000${server.graphqlPath}`);
});

1.3 代码解析

✅ app.use(cors()) → 允许跨域请求，避免 CORS 错误
✅ app.use(bodyParser.json()) → 解析 JSON 请求体，方便解析 GraphQL 请求
✅ app.use(morgan("dev")) → 记录 HTTP 请求日志，方便调试
✅ server.applyMiddleware({ app }) → 把 Apollo Server 作为 Express 中间件

启动服务器

node server.js

服务器启动后，访问：

http://localhost:4000/graphql

你会看到 GraphQL Playground，可以在其中测试查询！🎉

2. 在前端执行 GraphQL 查询

后端搭建完成后，我们需要在前端请求数据。

这里介绍 两种方式：

1. Apollo Client（适用于 React/Vue/Angular）
2. Fetch API（适用于所有前端环境）

2.1 方式 1：使用 Apollo Client（适用于 React / Vue / Angular）

如果你的前端使用 React，推荐使用 Apollo Client 来管理 GraphQL 查询。

2.1.1 安装 Apollo Client

npm install @apollo/client graphql

2.1.2 React 代码示例

import React from "react";
import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from "@apollo/client";

// 1️⃣ **创建 Apollo Client**
const client = new ApolloClient({
  uri: "http://localhost:4000/graphql", // GraphQL 服务器地址
  cache: new InMemoryCache(),
});

// 2️⃣ **定义 GraphQL 查询**
const GET_USER = gql`
  query GetUser($id: ID!) {
    getUser(id: $id) {
      name
      posts {
        title
        content
      }
    }
  }
`;

// 3️⃣ **创建 React 组件**
const UserInfo = ({ userId }: { userId: string }) => {
  const { loading, error, data } = useQuery(GET_USER, { variables: { id: userId } });

  if (loading) return <p>加载中...</p>;
  if (error) return <p>错误: {error.message}</p>;

 return (
  <div>
    <h2>用户: {data.getUser.name}</h2>
    <h3>文章列表:</h3>
    <ul>
      {data.getUser.posts.map((post: { title: string; content: string }, index: number) => (
        <li key={index}>
          <strong>{post.title}</strong> - {post.content}
        </li>
      ))}
    </ul>
  </div>
);
};

// 4️⃣ **渲染组件**
const App = () => (
  <ApolloProvider client={client}>
    <UserInfo userId="123" />
  </ApolloProvider>
);

export default App;

2.2 方式 2：使用 Fetch API（适用于所有前端环境）

如果你不想安装 Apollo Client，可以使用 原生 Fetch API 直接发送 GraphQL 请求。

async function fetchUser(userId) {
  const query = `
    query GetUser($id: ID!) {
      getUser(id: $id) {
        name
        posts {
          title
          content
        }
      }
    }
  `;

  const variables = { id: userId };

  const response = await fetch("http://localhost:4000/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query, variables }),
  });

  const result = await response.json();
  console.log(result.data);
}

// 执行查询
fetchUser("123");

3. 选择哪种方式？

如果你使用 React / Vue / Angular，建议使用 Apollo Client，因为它提供了更好的 状态管理和缓存机制。
如果你的项目 没有安装 Apollo，可以使用 Fetch API 直接请求 GraphQL 服务器。

4. 总结

✅ Express + Apollo Server 轻松构建 GraphQL API
✅ 使用 CORS、Body Parser、Morgan 等 Express 中间件
✅ 前端可使用 Apollo Client 或 Fetch API 查询数据

希望这篇文章能帮你快速上手 GraphQL + Express + Apollo Server！🚀