apollo-inspector-ui
v0.0.11
Published
Records all operations being executed via Apollo client in a given time and shows info about each operation. This UI is using [apollo-inspector](https://www.npmjs.com/package/apollo-inspector?activeTab=readme) library<br>
Downloads
196
Readme
Operations Tracker
Records all operations being executed via Apollo client in a given time and shows info about each operation. This UI is using apollo-inspector library
What kind of issues can be debugged using the tool
- Helps figuring out
unwanted operations
being fired in render phase - Help in figuring out the reasons for
multiple re-renders
of the same watch query - Help figuring out issues with
conflicting queries
- Shows field name in case
missing field error
- Detailed time info lets you figure out if queries are being fired in
Waterfall model
or not. - Helps figuring out if
data is taking too much time
to get written to cache. - Shows why an operation failed
Built in features
- Tracks all operations Query, Mutation, subscription, client.readQuery, client.writeQuery, cache.readQuery, cache.writeQuery, client.readFragment, client.writeFragment, cache.readFragment, cache.writeFragment.
- For each operations, below info is available
- Operation Name
- Operation Type
- Failure or Succeded
- Fetch policy
- Total execution time
- Operation queued at time
- Size in KB of the result of the Operation
- There are filters present using which, one can filter operations list
- Operation type filter (Query/Mutation/Subscription)
- Results from filter (Cache/Network)
- Operation Status (Succeeded/Failed)
- It also shows which all operations are responsible for re-rendering of an query in
Affected Queries
view - It allows you copy operations data in JSON format.
How to use
Select the apollo clients which needs to be tracked
Click on Record button
Do some changes in UI.
It'd start showing all the on-going operations.
5. Click on a operation to see detailed view
- One can select operation to copy by checking the checkboxes for each operation.
Filter options
- Supports comma separate search text to search multiple operations
- Filter by Operation type (Query/Mutation/Subscription)
- Filter by from where the result is being fetched (Cache/Network)
- Filter by operation status (Succeded/Failed)
Copy options
Copy All Operations
It copies all the operations which have been recorded
Copy Filtered Operations
It copies only the current view of the operations
Copy Checked Operations
It copies only those operations, whose check boxes are checked
Copy currently Opened Operation
It copies the operation, which is currently opened in the detailed view
Affected Queries view
This view shows what operations led to re-render of a given query. On the left side is the list of queries which have been re-rendered and on the right side, it shows what all operation caused it.
Demo
Run yarn parcel:test:start
to see the demo the tool working