shadcn.io is not affiliated with official shadcn/ui
GraphQL Query Analyzer Block for React Aria
Five GraphQL operations with p95 and a complexity score, the chosen one's resolver tree with time bars, call counts and an N+1 flag, a switch for fields over 20 ms, and the operation text with a copy button.
Installation
Overview
See which resolver makes a GraphQL operation slow, and where one is called in a loop, with this query analyzer for React with React Aria. It is Nodelit, a GraphQL gateway analyzer (made up), sampling an hour of traffic. A hairline frame with a plus mark on each corner holds a list of five operations on the start side: name, p95 and a complexity score with a bar (a native select on a phone). The chosen operation's resolver tree is an indented list in a fixed scroll region: each field with its total time as a bar, how many times it ran, and an N+1 Badge with a sentence where it ran more than ten times as often as its parent. A Switch hides the fields under 20 ms and counts what remains. Under the tree the operation's text sits in a Syntax Text box with a Copy Button. There is no time axis, only totals and counts. Guides draw the frame and its bands; the entrance is CSS only. For gateway teams, schema owners and anyone chasing N+1 queries.
FAQ
How do I use my own operations?
Edit OPERATIONS: each has a name, a p95, a complexity score out of 1,000, its text and its fields. Fields are lines depth|name|total ms|calls in tree order, for example 2|Post.author|214|48. The parent's call count is taken from the nearest line above with a smaller depth, and a field is flagged when its calls exceed LOOP (10) times its parent's.
What counts as N+1 here?
A field that ran more than ten times as often as its parent, for example an author resolver that ran 48 times under a feed resolver that ran once. The row shows an N+1 badge and a sentence with both numbers. Fields served by a batching loader run a few times, not once per row, and are not flagged.
Why can a child take longer than its parent?
Times are totals across all calls of a field, not one call's duration. A resolver that runs 48 times for 4 ms each totals 192 ms, which can exceed the parent's wall time when the calls run in parallel. The bars compare fields with the biggest field of the operation.
What does the switch do?
It hides fields at or under 20 ms and says how many remain ("11 of 23 fields shown"). Hidden fields stay in the data; the scroll region keeps its height, so nothing moves. The count is also spoken in a polite status line.