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 つの手順で実行できます。
GraphiQL ビルドを構成してコンパイルする
構築された 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 に同梱されているバージョンを使用しています) |
2 | HTTP リクエストを処理するための Web ハンドラーを構成します。ユースケースに応じてカスタム HandlerFunction を実装できます |
3 | 最後に、ハンドラーを特定の HTTP エンドポイントにマップします。 |
4 | RouterFunction Bean を通じてこの新しいルートを公開します |
関連する静的リソースを提供するようにアプリケーションを構成する必要がある場合もあります。