构建GraphQL项目：从环境配置到数据库连接的全流程指南

### 构建 GraphQL 项目：从环境配置到数据库连接的全流程指南 在开发项目时，确保代码的正确运行至关重要。为了避免因包版本更新带来的兼容性问题，建议使用指定版本的包。以下是 `package.json` 文件中应包含的脚本： ```json "scripts": { "dev": "ts-node-dev src/index.ts", "build": "rm -rf dist && tsc -p . --traceResolution", "lint": "eslint . --ext .js,.tsx,.ts", "lint:fix": "eslint . --fix --ext .js,.tsx,.ts", "test": "jest src" } ``` #### 配置环境变量 在开发过程中，不同的环境（开发、测试、生产）通常需要不同的配置。`.env` 文件（也称为 dotenv）是用于指定应用程序环境变量的配置文件。在开始编写登录代码之前，需要创建一个 `.env` 文件（通常该文件会被 `.gitignore` 忽略），用于存储私有数据，如数据库连接信息和安全密钥。可以将仓库中已有的 `.env.example` 文件重命名为 `.env`，并填入相应的连接数据。示例如下： ```plaintext DB_DIALECT=postgres DB_PORT=5432 DB_HOST=localhost DB_DATABASE=<your-database> DB_USERNAME=<your-username> DB_PASSWORD=<your-password> ``` #### 创建基本配置文件 为项目创建一个配置文件，用于存储一些安全数据，该文件应位于 `/backend/config/config.json`。以下是示例配置： ```json { "server": { "port": 4000 }, "security": { "secretKey": "C0nt3ntP1", "expiresIn": "7d" } } ``` 接着，在 `config` 目录下创建一个 `index.ts` 文件。该文件会使用 `dotenv` 包引入 `.env` 文件中定义的所有数据库连接信息，并导出三个配置变量 `$db`、`$security` 和 `$server`： ```typescript import dotenv from 'dotenv' import config from './config.json' dotenv.config() type Db = { dialect: string host: string port: string database: string username: string password: string } type Security = { secretKey: string expiresIn: string } type Server = { port: number } const db: Db = { dialect: process.env.DB_DIALECT || '', port: process.env.DB_PORT || '', host: process.env.DB_HOST || '', database: process.env.DB_DATABASE || '', username: process.env.DB_USERNAME || '', password: process.env.DB_PASSWORD || '' } const { security, server } = config export const $db: Db = db export const $security: Security = security export const $server: Server = server ``` 如果 `.env` 文件不在根目录或不存在，所有变量都将为 `undefined`。 #### 配置 Apollo Server Apollo Server 是一个非常流行的开源库，用于处理 GraphQL，既可以作为服务器，也可以作为客户端。它具有丰富的文档和简单的实现方式，成为了许多开发者的首选。其直观的界面和灵活的架构使其易于定制和适应特定需求，同时其强大的功能和可靠的性能确保了与现有代码库的无缝集成。 以下是配置 Apollo Server 的具体步骤： 1. **导入必要的组件**：在 `/backend/src/index.ts` 文件中导入所需的组件。 ```typescript import { makeExecutableSchema } from '@graphql-tools/schema' import { ApolloServer } from '@apollo/server' import { expressMiddleware } from '@apollo/server/express4' import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer' import cors from 'cors' import http from 'http' import express from 'express' import { applyMiddleware } from 'graphql-middleware' import { json } from 'body-parser' import { $server } from '../config' import resolvers from './graphql/resolvers' import typeDefs from './graphql/types' import models from './models' ``` 2. **设置 Express.js 应用和 CORS**： ```typescript const app = express() const corsOptions = { origin: '*', credentials: true } app.use(cors(corsOptions)) app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*') res.header( 'Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept' ) next() }) ``` 3. **创建 GraphQL 模式**： ```typescript const schema = applyMiddleware( makeExecutableSchema({ typeDefs, resolvers }) ) ``` 4. **创建 Apollo Server 实例**： ```typescript const apolloServer = new ApolloServer({ schema, plugins: [ApolloServerPluginDrainHttpServer({ httpServer })] }) ``` 5. **同步 Sequelize 并启动服务器**： ```typescript const main = async () => { const alter = true const force = false await apolloServer.start() await models.sequelize.sync({ alter, force }) app.use( '/graphql', cors<cors.CorsRequest>(), json(), expressMiddleware(apolloServer, { context: async () => ({ models }) }) ) await new Promise<void>((resolve) => httpServer.listen({ port: $server.port }, resolve)) console.log(`🚀 Server ready at http://localhost:${$server.port}/graphql`) } main() ``` 这个过程有助于将数据库与模型同步，确保对模型所做的任何修改都会自动更新相应的表。 #### 定义 GraphQL 类型、查询和突变 创建 Apollo Server 实例后，下一步是定义 GraphQL 类型。在设置像 Apollo 这样的 GraphQL 服务器时，创建 GraphQL 类型至关重要。这些类型可以确保从 API 返回的数据可靠，并符合预期的结构。 ##### 标量类型 首先，在 `/backend/src/graphql/types/Scalar.ts` 文件中定义标量类型： ```typescript import gql from 'graphql-tag' export default gql` scalar UUID scalar Datetime scalar JSON ` ``` ##### 用户类型 接着，在 `backend/src/graphql/types/User.ts` 文件中创建用户类型： ```typescript import gql from 'graphql-tag' export default gql` type User { id: UUID! username: String! email: String! password: String! role: String! active: Boolean! createdAt: Datetime! updatedAt: Datetime! } ` ``` ##### 查询 GraphQL 查询用