fix(graphql_playground): use graphiql instead (#2446)

## Linked Issues/PRs
<!-- List of related issues/PRs -->
- none

## Description
<!-- List of detailed changes -->
The graphql-playground is well-outdated, with the last update being 2y
ago. This PR switches it out for graphiql which is more recently
maintained.
I did this because the tooltips don't dissapear on the playground with
latest versions of chrome/arc due to a deprecated event handler on the
DOM.
see graphql/graphql-playground#1429

<img width="1387" alt="image"
src="https://github.com/user-attachments/assets/521ba097-60ec-4562-a1a5-b0b27d59db65">


## Checklist
- [x] Breaking changes are clearly marked as such in the PR description
and changelog
- [x] New behavior is reflected in tests
- [x] [The specification](https://github.com/FuelLabs/fuel-specs/)
matches the implemented behavior (link update PR if changes are needed)

### Before requesting review
- [x] I have reviewed the code myself
- [x] I have created follow-up issues caused by this PR and linked them
here

### After merging, notify other teams

[Add or remove entries as needed]

- [ ] [Rust SDK](https://github.com/FuelLabs/fuels-rs/)
- [ ] [Sway compiler](https://github.com/FuelLabs/sway/)
- [ ] [Platform
documentation](https://github.com/FuelLabs/devrel-requests/issues/new?assignees=&labels=new+request&projects=&template=NEW-REQUEST.yml&title=%5BRequest%5D%3A+)
(for out-of-organization contributors, the person merging the PR will do
this)
- [ ] Someone else?

CHANGELOG.md

@@ -40,9 +40,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 #### Breaking
 - [2389](https://github.com/FuelLabs/fuel-core/pull/2258): Updated the `messageProof` GraphQL schema to return a non-nullable `MessageProof`.
-
-#### Breaking
 - [2154](https://github.com/FuelLabs/fuel-core/pull/2154): Transaction graphql endpoints use `TransactionType` instead of `fuel_tx::Transaction`.
+- [2446](https://github.com/FuelLabs/fuel-core/pull/2446): Use graphiql instead of graphql-playground due to known vulnerability and stale development.
 
 ## [Version 0.40.0]
 

bin/fuel-core/src/cli/run/graphql.rs

@@ -31,7 +31,7 @@ pub struct GraphQLArgs {
     pub graphql_max_complexity: usize,
 
     /// The max recursive depth of GraphQL queries.
-    #[clap(long = "graphql-max-recursive-depth", default_value = "16", env)]
+    #[clap(long = "graphql-max-recursive-depth", default_value = "24", env)]
     pub graphql_max_recursive_depth: usize,
 
     /// The max resolver recursive depth of GraphQL queries.

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"

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> {