GraphQL - 环境设置

GraphQL - 环境搭建

为了跟着本教程的示例进行操作，你需要在你的系统上安装一些基本工具。我们将重点搭建一个开发环境，使用 Node.js 和 Apollo Server 构建 GraphQL 服务器，这是 JavaScript 生态系统中一个流行的选择。

先决条件

操作系统： Linux、macOS 或 Windows。
Web 浏览器： 一个现代浏览器，如 Chrome、Firefox、Edge 或 Safari。
Node.js 和 npm： 推荐使用 Node.js 的最新 LTS（长期支持）版本（例如，v18.x 或 v20.x）。Node.js 包含了 npm（Node 包管理器）。从 https://nodejs.org/ 下载。
代码编辑器： 一个文本编辑器或集成开发环境（IDE）。强烈推荐使用 Visual Studio Code (https://code.visualstudio.com/)，它有出色的 GraphQL 开发扩展（如 ‘GraphQL: Language Feature Support’）。

验证 Node.js 和 npm 安装

打开你的终端（terminal）或命令提示符（command prompt），运行以下命令检查 Node.js 和 npm 是否正确安装并查看它们的版本：

node -v
npm -v

你应该会看到两个命令都输出了版本号（例如，v18.17.1 和 9.6.7）。如果没有，请从官方网站安装 Node.js。

搭建一个基本的 GraphQL 服务器项目

让我们一步步创建我们 GraphQL 服务器示例的基础结构。

步骤 1：创建项目文件夹

创建一个项目目录。在本设置指南中，我们将其命名为 graphql-tutorial-server。

mkdir graphql-tutorial-server
cd graphql-tutorial-server

步骤 2：初始化 Node.js 项目

使用 npm 将该文件夹初始化为一个 Node.js 项目。这将创建一个 package.json 文件，用于跟踪项目元数据和依赖项（dependencies）。

npm init -y

-y 标志接受默认设置。

步骤 3：安装核心依赖项

安装使用 Apollo Server 和 Express 构建 GraphQL 服务器所需的基本库：

npm install @apollo/server graphql express cors body-parser

依赖项说明：

@apollo/server：用于创建 Apollo GraphQL 服务器（版本 4+）的主要库。
graphql：GraphQL 的核心 JavaScript 实现。
express：一个流行、极简的 Node.js Web 框架，用于处理 HTTP 请求。
cors：中间件（middleware），用于启用跨域资源共享（Cross-Origin Resource Sharing）（允许来自不同域的请求，例如运行在不同端口上的前端应用）。
body-parser：中间件，用于解析传入的请求体（Apollo Server 的 Express 集成需要）。

步骤 4：安装开发依赖项（可选但推荐）

安装 nodemon 作为开发依赖项。当你修改代码时，nodemon 会自动重启服务器，加快开发速度。

npm install --save-dev nodemon

步骤 5：配置 `package.json` 脚本

打开 package.json 文件，添加/修改 scripts 部分以便轻松启动服务器：

{
  "name": "graphql-tutorial-server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js", // Assuming your main server file will be server.js 假设你的主服务器文件是 server.js
  "type": "module", // Add this line to use ES Modules (import/export syntax) 添加此行以使用 ES 模块 (import/export 语法)
  "scripts": {
    "start": "node server.js", // Basic start command 基本启动命令
    "dev": "nodemon server.js" // Start command using nodemon for development 开发时使用 nodemon 启动命令
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@apollo/server": "^4.x.x", // Replace x.x with actual installed version 将 x.x 替换为实际安装的版本
    "body-parser": "^1.x.x",
    "cors": "^2.x.x",
    "express": "^4.x.x",
    "graphql": "^16.x.x"
  },
  "devDependencies": {
    "nodemon": "^3.x.x"
  }
}

重要： 添加了 "type": "module" 以启用现代 JavaScript import/export 语法在 .js 文件中使用。如果你偏好 CommonJS (require/module.exports)，请省略此行。

步骤 6：创建基本服务器文件（`server.js`）

在 graphql-tutorial-server 目录的根目录中创建一个名为 server.js 的文件。添加最少的代码来启动一个 Apollo Server（我们将在后续章节中扩展它）：

// server.js (using ES Modules - requires "type": "module" in package.json) server.js (使用 ES 模块 - 需要在 package.json 中添加 "type": "module")
import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

// Define a simple schema 定义一个简单的 schema
const typeDefs = `#graphql
  type Query {
    hello: String
  }
`;

// Define a simple resolver 定义一个简单的解析器
const resolvers = {
  Query: {
    hello: () => 'Server setup successful!',
  },
};

// Create Apollo Server instance 创建 Apollo Server 实例
const server = new ApolloServer({
  typeDefs,
  resolvers,
});

// Start the server 启动服务器
async function startServer() {
  const { url } = await startStandaloneServer(server, {
    listen: { port: 9000 },
  });
  console.log(`🚀 Server ready at: ${url}`);
}

startServer();

这里使用了 startStandaloneServer 进行快速设置，无需在此基本测试中显式集成 Express。

步骤 7：运行测试服务器

使用你在 package.json 中定义的脚本：

npm run dev  # Use nodemon for development (recommended) 开发时使用 nodemon (推荐)
# OR # 或
npm start    # Use node directly 直接使用 node

你应该看到输出：🚀 Server ready at: http://localhost:9000/。

你可以在浏览器中打开 http://localhost:9000/，访问 Apollo Sandbox 并测试基本的 hello 查询：

query TestHello {
  hello
}

响应应该是：

{
  "data": {
    "hello": "Server setup successful!"
  }
}

下一步

你的基本环境已经就绪！在后续章节中，我们将在此基础上构建，添加更复杂的 schema、解析器、数据处理，并更深入地集成像 Express 这样的 Web 框架。