React中使用GraphQL对MongoDB事件按eventStartDate排序问题

一、核心思路：将日期字段改回Date类型 #

字符串类型的日期排序存在格式依赖问题（如非ISO格式字符串排序逻辑混乱），MongoDB原生支持Date类型的高效排序，因此最优方案是将eventStartDate及相关日期字段改回Date类型，再实现排序逻辑。

二、分步实现 #

1. 修改MongoDB Event模型

将模型中日期字段的类型从String改为Date：

// models/Event.js
const mongoose = require('mongoose');

const EventSchema = new mongoose.Schema({
  // 其他字段保留不变
  eventStartDate: {
    type: Date,
    required: true // 根据业务需求调整是否必填
  },
  eventEndDate: Date,
  earlyEntryDeadline: Date,
  entryDeadline: Date
  // 其余字段省略...
});

module.exports = mongoose.model('Event', EventSchema);

2. 更新GraphQL TypeDefs

GraphQL无内置Date标量，推荐使用graphql-scalars包提供的DateTime类型，确保前后端日期类型一致：

• 先安装依赖：npm install graphql-scalars
• 修改TypeDefs：

# 导入DateTime标量
scalar DateTime

type Event {
    _id: ID
    eventStyle: String
    eventType: String
    eventName: String
    eventCity: String
    eventState: String
    eventGenInfo: String
    eventWeighInInfo: String
    eventStartDate: DateTime # 替换原String类型
    eventEndDate: DateTime
    eventStartTime: String # 若仅存时间可保留String，如需完整时间也可改为DateTime
    earlyEntryDeadline: DateTime
    # 其余字段省略...
}

# 可选：给查询添加排序参数，支持前端自定义排序方向
type Query {
    events(sortOrder: String): [Event!]!
}

3. 修改Resolver实现排序逻辑

在Resolver中使用MongoDB的sort()方法，实现按eventStartDate排序：

events: async (parent, args) => {
  // 默认升序，若前端传"desc"则降序
  const order = args.sortOrder === 'desc' ? -1 : 1;
  // 查询并按eventStartDate排序
  const events = await Event.find({}).sort({ eventStartDate: order });
  return events;
},

4. 前端适配处理

GraphQL返回的DateTime是ISO格式字符串，前端可转换为Date对象后格式化显示（以date-fns为例）：

import { format } from 'date-fns';

// 组件中渲染事件
{events.map(event => (
  <div key={event._id}>
    <h3>{event.eventName}</h3>
    <p>开始日期：{format(new Date(event.eventStartDate), 'yyyy-MM-dd')}</p>
  </div>
))}

5. （可选）迁移现有字符串日期数据

若数据库中已有字符串格式的日期，需一次性转换为Date类型，运行以下脚本：

// migrate-dates.js
const mongoose = require('mongoose');
const Event = require('./models/Event');

mongoose.connect('你的MongoDB连接字符串')
  .then(async () => {
    // 找出所有字符串类型的eventStartDate记录
    const events = await Event.find({ eventStartDate: { $type: 'string' } });
    for (const event of events) {
      // 假设字符串为ISO格式（如"2024-05-20"），直接转换为Date
      event.eventStartDate = new Date(event.eventStartDate);
      await event.save();
    }
    console.log('日期数据迁移完成');
    process.exit(0);
  })
  .catch(err => {
    console.error(err);
    process.exit(1);
  });

运行脚本：node migrate-dates.js

内容的提问来源于stack exchange，提问作者Stephen Scott Moore