GraphiQL Playground++ for Federated GraphQL | Cosmo by WunderGraph - WunderGraph
Developer Experience · GraphiQL Playground++
See exactly how your federated query executes across subgraphs
Add the X-WG-TRACE header. Get tree and waterfall visualizations of query execution — per-subgraph timing, inputs, and outputs, built into the Cosmo Playground.
No router configuration required. Works out of the box with the Cosmo Playground.
The problem
Standard IDEs hide federation
The final merged response tells you nothing about which subgraph handled which field, how long each took, or whether calls ran in parallel.
Generic IDEs only show the final response
A standard GraphQL client returns the merged result. Which subgraph contributed which field, and how long each call took, is never visible.
Parallel execution is invisible without tracing
A query dispatching to four subgraphs looks identical to one making four serial calls. Without timing data, you cannot tell which calls overlap and which wait.
Debugging slow queries requires guesswork
Without per-subgraph timing, any service in the chain could be the bottleneck. Optimization becomes trial and error across multiple teams.
Our solution
Visual query execution tracing
The Cosmo Playground extends GraphiQL with Advanced Request Tracing (ART). One header activates it. The playground renders the execution data in two visualization modes.
From request to visualization
- Include the
X-WG-TRACEheader in a playground request. - The Cosmo Router executes the query and captures Advanced Request Tracing (ART) data alongside the response.
- The Playground parses the trace payload and renders it in two modes: tree view and waterfall view.
- Tree view shows the hierarchical execution structure — which subgraph handles which portion of the query.
- Waterfall view shows the execution timeline — which calls run in parallel and which are sequential.
- Each step includes the subgraph name, duration, inputs sent, and outputs received.
Before & After
| Before Cosmo | With Cosmo |
|---|---|
| Final merged response with no execution breakdown | Tree view of execution with subgraph assignments per field |
| No visibility into parallel vs sequential calls | Waterfall view showing which calls overlap and which are serial |
| Guessing which subgraph is causing latency | Per-subgraph timing in milliseconds for every call |
| No insight into data flowing between subgraphs | Inputs and outputs visible for each step in the execution chain |
Visualization modes
Two views of the same execution
Tree view - Shows the hierarchical execution structure. Navigate through nested subgraph calls and see which fields come from which service.
Waterfall view - Shows the execution timeline. Parallel calls appear side by side. Sequential calls stack vertically. Duration is visible for each call.
How tracing works in Cosmo Playground
01
One header enables tracing.
Add the header
Include X-WG-TRACE in the playground request headers. No router configuration change is required.
02
ART data captured per subgraph.
Execute
Run the query. The Cosmo Router executes it across subgraphs and captures timing, inputs, and outputs for every step.
03
Hierarchical subgraph breakdown.
Inspect — tree view
Switch to the tree view tab. See which fields come from which subgraphs, nested by the query structure.
04
Timeline of parallel and serial calls.
Inspect — waterfall view
Switch to the waterfall view tab. See the full execution timeline — which calls run in parallel and where latency is concentrated.
Capabilities
What you get with Playground++
- Tree view - Hierarchical breakdown of query execution. See which subgraph handles each field, nested by the query structure.
- Waterfall view - Timeline visualization of the full execution. Parallel calls appear side by side. Sequential calls stack vertically with total duration per subgraph.
- Per-subgraph timing - Duration in milliseconds for every subgraph call in the execution chain. Identify slow services without instrumenting each one separately.
- Inputs and outputs - View the data sent to each subgraph and the response returned at every step in the execution chain.
Debug your federated queries visually
Add X-WG-TRACE to any playground request. See the full execution tree and waterfall in seconds.
FAQ
GraphiQL Playground++ on Cosmo
- How do I enable query execution tracing in the playground?
- What is the difference between tree view and waterfall view?
- Does tracing affect production performance?
- Can I see which fields came from which subgraph?
- Can I see the data flowing between subgraphs?
- Where is the ART feature documented?
More in the playground documentation.