在Next.js 14+React(TS)中如何将GraphQL数据文件与Resolver分离？

核心结论 #

直接把数据操作逻辑写在Resolver里并非最佳实践——随着业务复杂度提升，会导致Resolver代码臃肿、复用性差、难以维护和测试。正确的做法是将数据访问逻辑抽离到独立的数据层（如Service/Repository层），Resolver仅负责处理GraphQL请求的参数校验、调用数据层方法、返回符合Schema规范的结果。

为什么要抽离数据层？ #

• 关注点分离：Resolver专注处理GraphQL专属逻辑（参数解析、权限校验、字段格式映射），数据层专注数据读写（数据库操作、外部API调用）
• 复用性：同一份数据操作逻辑可在多个Resolver或其他业务模块中复用
• 可测试性：独立的数据层无需依赖GraphQL上下文，更容易编写单元测试
• 可维护性：业务逻辑变更时，只需修改数据层代码，无需改动Resolver

具体实现方案（适配你的技术栈） #

1. 创建独立的数据层文件 #

以Todo的CRUD为例，创建services/todoService.ts，这里用内存数据模拟（实际项目可替换为Prisma、MongoDB驱动等数据库操作）：

// services/todoService.ts
// 定义Todo类型
export interface Todo {
  id: string;
  title: string;
  completed: boolean;
  createdAt: Date;
}

// 模拟内存数据库
let todos: Todo[] = [
  {
    id: "1",
    title: "学习GraphQL",
    completed: false,
    createdAt: new Date(),
  },
];

// 封装数据操作方法
export const todoService = {
  // 获取所有Todo
  getAllTodos: (): Todo[] => todos,

  // 根据ID获取单个Todo
  getTodoById: (id: string): Todo | undefined => {
    return todos.find(todo => todo.id === id);
  },

  // 创建Todo
  createTodo: (title: string): Todo => {
    const newTodo: Todo = {
      id: Date.now().toString(),
      title,
      completed: false,
      createdAt: new Date(),
    };
    todos.push(newTodo);
    return newTodo;
  },

  // 更新Todo
  updateTodo: (id: string, updates: Partial<Todo>): Todo | undefined => {
    const todoIndex = todos.findIndex(todo => todo.id === id);
    if (todoIndex === -1) return undefined;
    todos[todoIndex] = { ...todos[todoIndex], ...updates };
    return todos[todoIndex];
  },

  // 删除Todo
  deleteTodo: (id: string): boolean => {
    const initialLength = todos.length;
    todos = todos.filter(todo => todo.id !== id);
    return todos.length !== initialLength;
  },
};

2. 更新TypeDefs，添加Todo相关Schema #

// typeDefs.ts
import { gql } from "graphql-tag";

const typeDefs = gql`
  type Todo {
    id: ID!
    title: String!
    completed: Boolean!
    createdAt: String!
  }

  type Query {
    hello: String
    getAllTodos: [Todo!]!
    getTodoById(id: ID!): Todo
  }

  type Mutation {
    createTodo(title: String!): Todo!
    updateTodo(id: ID!, title: String, completed: Boolean): Todo
    deleteTodo(id: ID!): Boolean!
  }
`;

export default typeDefs;

3. 修改Resolver，调用数据层方法 #

// resolvers.ts
import { todoService } from "./services/todoService";

const resolvers = {
  Query: {
    hello: () => "world",
    getAllTodos: () => todoService.getAllTodos(),
    getTodoById: (_: unknown, args: { id: string }) => todoService.getTodoById(args.id),
  },
  Mutation: {
    createTodo: (_: unknown, args: { title: string }) => todoService.createTodo(args.title),
    updateTodo: (_: unknown, args: { id: string; title?: string; completed?: boolean }) => 
      todoService.updateTodo(args.id, { title: args.title, completed: args.completed }),
    deleteTodo: (_: unknown, args: { id: string }) => todoService.deleteTodo(args.id),
  },
  // 可选：处理日期格式转换，将Date对象转为前端可识别的字符串
  Todo: {
    createdAt: (parent: { createdAt: Date }) => parent.createdAt.toISOString(),
  },
};

export default resolvers;

4. 保留现有Route.ts代码 #

你的Route.ts配置无需改动，可直接复用：

// Route.ts
import typeDefs from './typeDefs';
import resolvers from './resolvers';
import { startServerAndCreateNextHandler } from "@as-integrations/next";    

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

export const config = {
    api: {
      bodyParser: false,
    },
};
  
const handler = startServerAndCreateNextHandler(graphql);      
export { handler as GET, handler as POST }; 

后续扩展建议 #

• 若接入数据库，将数据层的内存操作替换为Prisma、TypeORM等ORM的调用
• 在数据层添加错误处理，抛出业务专属错误，Resolver中捕获并返回GraphQL标准错误
• 复杂业务场景下可再添加Repository层，在Service与数据库之间做抽象，适配不同数据源

内容的提问来源于stack exchange，提问作者user17449555