能否为Hot Chocolate集成外部GraphQL IDE？附实现对比

1. 为Hot Chocolate集成GraphiQL/GraphQL Playground的方法 #

可以集成，你遇到的404错误是因为中间件配置顺序不对，未匹配Hot Chocolate的GraphQL端点路径。默认情况下Hot Chocolate的GraphQL端点为/graphql，按以下步骤配置即可解决：

步骤1：安装对应NuGet包 #

• 集成GraphiQL：安装GraphiQl包
• 集成GraphQL Playground：安装GraphQL.Server.Ui.Playground包

步骤2：修改Program.cs配置 #

在UseEndpoints之后添加对应的IDE中间件，确保路由匹配正确。修改后的关键代码如下：

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}

app.UseRouting();

app.UseWebSockets();

app.UseEndpoints(endpoints =>
{
    endpoints.MapGraphQL();
});

// 二选一或同时添加
app.UseGraphiQl("/graphql");
// app.UseGraphQLPlayground("/graphql");

app.Run();

注意：中间件顺序至关重要，必须在UseEndpoints之后添加IDE中间件，否则会出现404错误。

2. 外部IDE相较于Hot Chocolate自带IDE的优势 #

• 操作习惯延续：如果之前长期使用GraphiQL或Playground，无需重新适应新界面布局与操作逻辑，降低切换成本
• 功能细节差异：
  • GraphQL Playground支持更完善的历史查询管理、变量持久化，以及查询结果对比功能
  • GraphiQL提供更简洁的界面，部分开发者偏好其快捷查询输入与结果展示方式
• 多环境适配便捷：部分外部IDE支持快速切换不同GraphQL端点地址，适合在开发、测试等多环境间快速切换测试
• 生态扩展支持：第三方社区为GraphiQL/Playground提供了更多插件，比如语法高亮增强、查询格式化、自定义主题等，可根据需求扩展功能

ISchema实现代码 #

Program.cs

using GraphiQl;
using GraphQL.Server;
using GraphQL.Types;
using GraphQlProject.Interfaces;
using GraphQlProject.Mutations;
using GraphQlProject.Query;
using GraphQlProject.Schema;
using GraphQlProject.Services;
using GraphQlProject.Type;
using Microsoft.Azure.Cosmos;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();

builder.Services.AddTransient<IUser, UserService>();

// Register GraphQL type, query and schema
builder.Services.AddSingleton<UserType>();
builder.Services.AddSingleton<ContactType>();

builder.Services.AddSingleton<UserQuery>();

builder.Services.AddSingleton<ISchema, UserSchema>();
builder.Services.AddGraphQL(x => x.EnableMetrics = false).AddSystemTextJson();

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

// app.UseGraphiQl("/graphql");
app.UseGraphQLPlayground("/graphql");
app.UseGraphQL<ISchema>();

app.Run();

UserType.cs

using GraphQL.Types;
using GraphQlProject.Models;

namespace GraphQlProject.Type;

public class UserType : ObjectGraphType<User>
{
    public UserType()
    {
        Field(x => x.id);
        Field(x => x.userId);
        Field(x => x.isActive);
        Field(
            name: "contact",
            type: typeof(ContactType),
            resolve: context => context.Source.contact
        );
    }
}

UserQuery.cs

using GraphQL;
using GraphQL.Types;
using GraphQlProject.Interfaces;
using GraphQlProject.Type;

namespace GraphQlProject.Query;

public class UserQuery: ObjectGraphType
{
    public UserQuery(IUser userService)
    {
        Field<UserType>("user", 
            arguments: new QueryArguments(
                new QueryArgument<StringGraphType> { Name = "id"}, 
                new QueryArgument<StringGraphType> { Name = "userId"}
                ),
            resolve: _ => userService.GetUserById(
                _.GetArgument<string>("id"), 
                _.GetArgument<string>("userId")
                ));
    }
}

UserService.cs

using System.Text.Json;
using System.Text.Json.Serialization;
using GraphQlProject.Interfaces;
using Microsoft.Azure.Cosmos;
using User = GraphQlProject.Models.User;

namespace GraphQlProject.Services;

public class UserService : IUser
{
    private readonly CosmosClient _client;
    private readonly IConfiguration _config;
    public UserService(CosmosClient client, IConfiguration config)
    {
        _client = client;
        _config = config;
    }

    public async Task<User> GetUserById(string id, string userId)
    {
        try
        {
            // Your logic here
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
            throw;
        }
    }
}

Hot Chocolate实现代码 #

Program.cs

using GraphQlHotChocolate.Resolver;
using GraphQlHotChocolate.Services;
using Microsoft.Azure.Cosmos;

var builder = WebApplication.CreateBuilder(args);

// Add Cosmos.
builder.Services.AddSingleton(_ => new CosmosClient(builder.Configuration["Cosmos:ConnectionString"]));

builder.Services.AddControllers();

builder.Services
    .AddGraphQLServer()
    .AddQueryType<Query>()
    .AddMutationType<Mutation>()
    .AddSubscriptionType<Subscriptions>()
    .AddInMemorySubscriptions();

builder.Services.AddTransient<IUser, UserService>();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}

app.UseRouting();

app.UseWebSockets();

app.UseEndpoints(endpoints =>
{
    endpoints.MapGraphQL();
});

app.Run();

UserQuery.cs

using GraphQlHotChocolate.Data;
using GraphQlHotChocolate.Services;

namespace GraphQlHotChocolate.Resolver;

public class Query
{
    private readonly IUser _userService;
    public Query(IUser userService)
    {
        _userService = userService;
    }
   
    public Task<User> GetUserById(string id, string userId) => _userService.GetUserById(id, userId);
}

UserService.cs

using System.Text.Json;
using System.Text.Json.Serialization;
using GraphQlProject.Interfaces;
using Microsoft.Azure.Cosmos;
using User = GraphQlProject.Models.User;

namespace GraphQlProject.Services;

public class UserService : IUser
{
    private readonly CosmosClient _client;
    private readonly IConfiguration _config;
    public UserService(CosmosClient client, IConfiguration config)
    {
        _client = client;
        _config = config;
    }

    public async Task<User> GetUserById(string id, string userId)
    {
        try
        {
            // Your logic here
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
            throw;
        }
    }
}

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