Data visualization for GraphQL state.
This Chrome extension will add a panel named "GraphQL state" to your devtools. When you use the framework "https://github.com/babyfish-ct/graphql-state", it can help you debug.
In the "GraphQL state" panel, you will see three tab pages: "simple states", "graph states" and "evict logs".
1. Simple states
The framework supports simple state management similar to "recoil", this tab page can visualize all simple states for you.
2. Graph states
The framework supports graph state management similar to "Apollo Client" and "Relay", its built-in normalized-cache is used to manage all data and relationships. This tab page can visualize this normalized-cache for you.
3. Evict Logs
This is the core value of the framework.
The essence of UI state is that one main mutation causes n extra mutations, the more complex the UI, the larger the N.
The framework allows developer only focus on main mutation, all the extra mutations will be executed automatically.
Compare with Apollo Client and Relay, after mutation, you neither need to update other affected data in the cache, nor need to determine which queries will be affected and need to be refetched.
When the framework is automatically performing extra mutations, it can choose to modify the cache directly, or it may choose to evict affected data from cache (this will cause related queries to be refetched automatically).
Obviously, the first choice is better than the second choice. This tab page lists the history of the second choice made by the framework, and tells the developer the following information.
i. Why did the framework make the second choice?
ii. Is it possible for developers to intervene in optimization and let framework make the first choice?
iii. If so, what should developers do?
You can Follow the below Step By Step procedure to install the GraphQL state Chrome Extension to your Chrome Web browser.
It is the GraphQL state Chrome extension download link you can download and install Chrome Browser.
Tags: Tab Page , Graph State , Affected Data , N Extra Mutations , Tab Page Lists , Simple State Management , Simple States , Graph States , Extra Mutations , Graphql State Panel , State Management , Simple State , Ui State , Tab Pages , Graphql State , Simple States Graph States , Evict Affected Data ,
Frameworkless devtool that works regardless of the graphql client being used, keep the same experience debugging your queries.
See whether a website is using GraphQL at a glance
Powerful GraphIQL Explorer
Generate graphql queries with random input data by extracting details from your graphql endpoint or schema text
A beautiful feature-rich GraphQL client for all platforms
Inspect GraphQL requests and response data
Chrome extension for GraphQL Playground
Build an extremely useful tool to manage graphQL queries !
Devtools panel for GraphQL development
Firecamp offers dedicated GUI runtime, tools & services for various protocols & styles like HTTP/Rest, GraphQL, WebSocket, MQTT etc