GraphiQL

GraphiQL是一个浏览器内的交互式图形 GraphQL IDE。它在开发人员中非常流行，因为它使探索和交互式开发 GraphQL API 变得很容易。在开发过程中，现成的 GraphiQL 集成通常足以帮助开发人员处理 API。在生产中，应用程序可能需要一个自定义 GraphiQL 构建，它包含公司徽标或特定的身份验证支持。

GraphiQL is a graphical interactive in-browser GraphQL IDE. It is very popular amongst developers as it makes it easy to explore and interactively develop GraphQL APIs. During development, a stock GraphiQL integration is often enough to help developers work on an API. In production, applications can require a custom GraphiQL build, that ships with a company logo or specific authentication support.

与 Spring 集成的 GraphQL 使用 a stock GraphiQL index.html page在 unpkg.com CDN 上托管静态资源。Spring Boot 应用程序可以通过一个配置属性轻松 启用此页面。

Spring for GraphQL ships with a stock GraphiQL index.html page that uses static resources hosted on the unpkg.com CDN. Spring Boot applications can easily enable this page with a configuration property.

如果应用程序需要不依赖 CDN 的设置，或者如果你想要自定义用户界面，则可能需要定制 GraphiQL 构建。这可以通过两个步骤来完成：

Your application may need a custom GraphiQL build if it requires a setup that doesn’t rely on a CDN, or if you wish to customize the user interface. This can be done in two steps:

  1. Configure and compile a GraphiQL build

  2. Expose the built GraphiQL instance through the Spring web infrastructure

Creating a custom GraphiQL build

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

This part is generally outside of the scope of this documentation, as there are several options for custom builds. You will find more information in the official GraphiQL documentation. You can choose to copy the build result directly in your application resources. Alternatively, you can integrate the JavaScript build in your project as a separate module by leveraging Node.js Gradle or Maven build plugins.

Exposing a GraphiQL instance

类路径中 GraphiQL 构建可用后，您可以使用 功能性网络框架 将其公开为一个端点。

Once a GraphiQL build is available on the classpath, you can expose it as an endpoint with the functional web frameworks.

include-code::GraphiQlConfiguration[]<1> 从类路径中加载 GraphiQL 页面（此处，我们使用 Spring with GraphQL 提供的版本）<2> 为处理 HTTP 请求配置一个网络处理器；您可以根据使用情况实现定制的 HandlerFunction<3> 最后，将处理器映射到特定的 HTTP 端点<4> 通过 RouterFunction bean 公开此新路由

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)
    }
}
1 Load the GraphiQL page from the classpath (here, we are using the version shipped with Spring for GraphQL)
2 Configure a web handler for processing HTTP requests; you can implement a custom HandlerFunction depending on your use case
3 Finally, map the handler to a specific HTTP endpoint
4 Expose this new route through a RouterFunction bean

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

You might also need to configure your application to serve the relevant static resources.