如何在HotChocolate GraphQL中用变量实现单字段动态排序？

问题根源 #

你之前的两种写法均不符合GraphQL规范：

• 第一种试图用变量作为对象字段名，GraphQL不支持这种动态字段定义，变量仅能作为字段值使用。
• 第二种同时传递idOrder和statusOrder，后端会执行多字段排序，不符合「每次仅按单个字段排序」的需求。

后端（HotChocolate + .NET Core）实现步骤 #

1. 定义排序枚举与输入类型 #

先创建排序方向枚举，再定义产品排序的输入类型，每个排序字段设为可选枚举类型：

// 排序方向枚举
public enum SortDirection { ASC, DESC }

// 产品排序输入类型
public class ProductSortInput
{
    public SortDirection? Id { get; set; }
    public SortDirection? Status { get; set; }
}

2. 修改查询字段并处理排序逻辑 #

更新products查询字段，添加order参数并指定为ProductSortInput类型，同时在业务逻辑中仅处理第一个非空的排序字段：

public class Query
{
    public async Task<IQueryable<Product>> Products(
        [Service] IDocumentSession session,
        ProductSortInput? order = null)
    {
        var query = session.Query<Product>();

        // 仅处理第一个非空的排序字段，实现单字段排序
        if (order?.Id.HasValue == true)
        {
            query = order.Id == SortDirection.ASC 
                ? query.OrderBy(p => p.Id) 
                : query.OrderByDescending(p => p.Id);
        }
        else if (order?.Status.HasValue == true)
        {
            query = order.Status == SortDirection.ASC 
                ? query.OrderBy(p => p.Status) 
                : query.OrderByDescending(p => p.Status);
        }

        return query;
    }
}

3. 注册类型到HotChocolate #

在Program.cs中确保排序相关类型被注册到GraphQL服务：

builder.Services.AddGraphQLServer()
    .AddQueryType<Query>()
    .AddInputType<ProductSortInput>()
    .AddEnumType<SortDirection>();

前端（React Relay）实现步骤 #

1. 定义带变量的GraphQL查询 #

基于后端生成的输入类型，编写符合Relay规范的查询：

query orderOnTheFly($order: ProductSortInput) {
  products(order: $order) {
    nodes {
      id
      status
    }
  }
}

2. 在组件中动态构造变量 #

根据用户选择的排序字段和方向，构造仅包含单个排序字段的变量：

import { useLazyLoadQuery, graphql } from 'react-relay';

const ProductList = () => {
  // 示例：用户选择按status降序排序，若选id升序则改为 { id: "ASC" }
  const order = { status: "DESC" };

  const data = useLazyLoadQuery(
    graphql`
      query orderOnTheFly($order: ProductSortInput) {
        products(order: $order) {
          nodes {
            id
            status
          }
        }
      }
    `,
    { order }
  );

  return (
    <ul>
      {data.products.nodes.map(product => (
        <li key={product.id}>ID: {product.id}, Status: {product.status}</li>
      ))}
    </ul>
  );
};

export default ProductList;

3. 执行Relay编译 #

运行Relay编译命令生成查询相关文件：

npm run relay

关键说明 #

• 后端通过判断输入类型的非空字段，确保每次仅执行单字段排序，避免多字段排序冲突。
• 前端无需字符串拼接，只需构造符合ProductSortInput结构的变量即可，完全适配Relay的编译规范。

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