跳到主要内容

GraphiQL

DeepSeek V3 中英对照 GraphiQL

GraphiQL 是一款图形化的交互式浏览器内 GraphQL 集成开发环境。它在开发者中非常受欢迎，因为它使得探索和交互式开发 GraphQL API 变得简单。在开发过程中，一个标准的 GraphiQL 集成通常足以帮助开发者处理 API。而在生产环境中，应用程序可能需要一个定制的 GraphiQL 构建版本，其中包含公司徽标或特定的身份验证支持。

Spring for GraphQL 附带了一个标准的 GraphiQL index.html 页面，该页面使用了托管在 esm.sh CDN 上的静态资源。Spring Boot 应用程序可以通过配置属性轻松启用此页面。

如果你的应用需要不依赖 CDN 的配置，或者你希望自定义用户界面，那么可能需要一个自定义的 GraphiQL 构建。这可以通过两个步骤完成：

  1. 配置并编译 GraphiQL 构建版本

  2. 通过 Spring Web 基础设施暴露已构建的 GraphiQL 实例

创建自定义 GraphiQL 构建​

这部分内容通常不在本文档的讨论范围内，因为自定义构建有多种选择。你可以在 GraphiQL 官方文档 中找到更多信息。你可以选择直接将构建结果复制到你的应用程序资源中。或者，你也可以通过利用 Node.js 的 Gradle 或 Maven 构建插件，将 JavaScript 构建作为一个单独的模块集成到你的项目中。

暴露 GraphiQL 实例​

一旦 GraphiQL 构建文件在类路径中可用，您就可以通过函数式 Web 框架将其作为端点公开。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import org.springframework.core.io.ClassPathResource;
import org.springframework.graphql.server.webmvc.GraphiQlHandler;
import org.springframework.web.servlet.function.RouterFunction;
import org.springframework.web.servlet.function.RouterFunctions;
import org.springframework.web.servlet.function.ServerResponse;

@Configuration
public class GraphiQlConfiguration {

	@Bean
	@Order(0)
	public RouterFunction<ServerResponse> graphiQlRouterFunction() {
		RouterFunctions.Builder builder = RouterFunctions.route();
		ClassPathResource graphiQlPage = new ClassPathResource("graphiql/index.html"); 1
		GraphiQlHandler graphiQLHandler = new GraphiQlHandler("/graphql", "", graphiQlPage); 2
		builder = builder.GET("/graphiql", graphiQLHandler::handleRequest); 3
		return builder.build(); 4
	}
}

  • 从类路径加载 GraphiQL 页面（此处我们使用 Spring for GraphQL 附带的版本）

  • 配置用于处理 HTTP 请求的 Web 处理器；您可以根据具体用例实现自定义的 HandlerFunction

  • 最后，将处理器映射到特定的 HTTP 端点

  • 通过 RouterFunction bean 暴露此新路由

您可能还需要配置应用程序以提供相关的静态资源。