From cc4f65950c07957f5ec89ce2ffd8bc6607cca2eb Mon Sep 17 00:00:00 2001
From: rymnc <43716372+rymnc@users.noreply.github.com>
Date: Thu, 21 Nov 2024 14:37:51 +0530
Subject: [PATCH] fix(graphql_playground): use graphiql instead

---
 Cargo.lock                                    | 49 +++++++++++++++++++
 crates/fuel-core/Cargo.toml                   |  2 +-
 .../fuel-core/src/graphql_api/api_service.rs  | 30 ++++++++----
 3 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index a3d5b110deb..77cc703905c 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -352,6 +352,7 @@ dependencies = [
  "fnv",
  "futures-timer",
  "futures-util",
+ "handlebars",
  "http 1.1.0",
  "indexmap 2.6.0",
  "mime",
@@ -4401,6 +4402,20 @@ dependencies = [
  "crunchy",
 ]
 
+[[package]]
+name = "handlebars"
+version = "5.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d08485b96a0e6393e9e4d1b8d48cf74ad6c063cd905eb33f42c1ce3f0377539b"
+dependencies = [
+ "log",
+ "pest",
+ "pest_derive",
+ "serde",
+ "serde_json",
+ "thiserror 1.0.69",
+]
+
 [[package]]
 name = "hash32"
 version = "0.2.1"
@@ -6940,6 +6955,40 @@ dependencies = [
  "ucd-trie",
 ]
 
+[[package]]
+name = "pest_derive"
+version = "2.7.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a548d2beca6773b1c244554d36fcf8548a8a58e74156968211567250e48e49a"
+dependencies = [
+ "pest",
+ "pest_generator",
+]
+
+[[package]]
+name = "pest_generator"
+version = "2.7.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c93a82e8d145725dcbaf44e5ea887c8a869efdcc28706df2d08c69e17077183"
+dependencies = [
+ "pest",
+ "pest_meta",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.87",
+]
+
+[[package]]
+name = "pest_meta"
+version = "2.7.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a941429fea7e08bedec25e4f6785b6ffaacc6b755da98df5ef3e7dcf4a124c4f"
+dependencies = [
+ "once_cell",
+ "pest",
+ "sha2 0.10.8",
+]
+
 [[package]]
 name = "petgraph"
 version = "0.6.5"
diff --git a/crates/fuel-core/Cargo.toml b/crates/fuel-core/Cargo.toml
index cac6a58150b..8e3230df1fc 100644
--- a/crates/fuel-core/Cargo.toml
+++ b/crates/fuel-core/Cargo.toml
@@ -13,7 +13,7 @@ version = { workspace = true }
 [dependencies]
 anyhow = { workspace = true }
 async-graphql = { version = "7.0.11", features = [
-  "playground",
+  "graphiql",
   "tracing",
 ], default-features = false }
 async-graphql-value = "7.0.11"
diff --git a/crates/fuel-core/src/graphql_api/api_service.rs b/crates/fuel-core/src/graphql_api/api_service.rs
index e9a1411085a..aeda75b4518 100644
--- a/crates/fuel-core/src/graphql_api/api_service.rs
+++ b/crates/fuel-core/src/graphql_api/api_service.rs
@@ -26,10 +26,7 @@ use crate::{
     },
 };
 use async_graphql::{
-    http::{
-        playground_source,
-        GraphQLPlaygroundConfig,
-    },
+    http::GraphiQLSource,
     Request,
     Response,
 };
@@ -278,16 +275,22 @@ where
         .extension(ViewExtension::new())
         .finish();
 
+    let graphql_endpoint = "/v1/graphql";
+    let graphql_subscription_endpoint = "/v1/graphql-sub";
+
+    let graphql_playground =
+        || render_graphql_playground(graphql_endpoint, graphql_subscription_endpoint);
+
     let router = Router::new()
         .route("/v1/playground", get(graphql_playground))
         .route(
-            "/v1/graphql",
+            graphql_endpoint,
             post(graphql_handler)
                 .layer(ConcurrencyLimitLayer::new(concurrency_limit))
                 .options(ok),
         )
         .route(
-            "/v1/graphql-sub",
+            graphql_subscription_endpoint,
             post(graphql_subscription_handler).options(ok),
         )
         .route("/v1/metrics", get(metrics))
@@ -325,10 +328,17 @@ where
     ))
 }
 
-async fn graphql_playground() -> impl IntoResponse {
-    Html(playground_source(GraphQLPlaygroundConfig::new(
-        "/v1/graphql",
-    )))
+async fn render_graphql_playground(
+    endpoint: &str,
+    subscription_endpoint: &str,
+) -> impl IntoResponse {
+    Html(
+        GraphiQLSource::build()
+            .endpoint(endpoint)
+            .subscription_endpoint(subscription_endpoint)
+            .title("Fuel Graphql Playground")
+            .finish(),
+    )
 }
 
 async fn health() -> Json<serde_json::Value> {