GraphiQL

GraphiQL [GitHub] (英語) は、グラフィカルでインタラクティブなブラウザー内 GraphQL IDE です。GraphQL API の探索とインタラクティブな開発が容易になるため、開発者の間で非常に人気があります。開発中は、標準の GraphiQL 統合だけで、開発者が API に取り組むのに十分な場合があります。運用環境では、アプリケーションに会社のロゴや特定の認証サポートが付属するカスタム GraphiQL ビルドが必要になる場合があります。

Spring for GraphQL には、unpkg.com CDN でホストされる静的リソースを使用する在庫の GraphiQL index.html ページ [GitHub] (英語) が付属しています。Spring Boot アプリケーションは、構成プロパティを使用してこのページを簡単に有効にすることができます。

アプリケーションで CDN に依存しないセットアップが必要な場合、またはユーザーインターフェースをカスタマイズしたい場合は、カスタム GraphiQL ビルドが必要になる場合があります。これは次の 2 つの手順で実行できます。

  1. GraphiQL ビルドを構成してコンパイルする

  2. 構築された GraphiQL インスタンスを Spring Web インフラストラクチャを通じて公開する

カスタム GraphiQL ビルドの作成

カスタムビルドにはいくつかのオプションがあるため、このパートは通常、このドキュメントの範囲外です。詳細については、GraphiQL の公式ドキュメント [GitHub] (英語) を参照してください。ビルド結果をアプリケーションリソースに直接コピーすることを選択できます。あるいは、Node.js Gradle [GitHub] (英語) または Maven [GitHub] (英語) ビルドプラグインを利用して、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)
	}
}
1 クラスパスから GraphiQL ページをロードします (ここでは、Spring for GraphQL に同梱されているバージョンを使用しています)
2HTTP リクエストを処理するための Web ハンドラーを構成します。ユースケースに応じてカスタム HandlerFunction を実装できます
3 最後に、ハンドラーを特定の HTTP エンドポイントにマップします。
4RouterFunction Bean を通じてこの新しいルートを公開します

関連する静的リソースを提供するようにアプリケーションを構成する必要がある場合もあります。