Apollo Client Devtools — A browser extension that adds powerful debugging and inspection tools for Apollo Client GraphQL apps.
Analyzed by Sai Pavan Gopularam · DevTools · GraphQL · View on GitHub
- Stars: 1528
- Forks: 174
- Commits last 30 days: 7
- Health: Maintained (7 commits this month)
- Language: TypeScript
- License: MIT
What It Is
Apollo Client Devtools is a browser extension for Chrome and Firefox that integrates directly into your browser's developer console. Think of it like a specialized magnifying glass for your GraphQL applications using Apollo Client. It adds a dedicated 'Apollo' tab where you can see exactly what data your app is requesting, how it's stored in the cache, and what mutations are happening.
This tool matters because debugging GraphQL client-side can be tricky. It solves the problem of 'what's actually in my cache?' or 'why isn't this query updating?' by giving developers clear visibility into their application's GraphQL state. This speeds up development, helps pinpoint bugs faster, and ensures your app's data layer is behaving as expected.
License Verdict
MIT License — Build and Sell Freely — Commercial Use Approved • No Copyleft Restrictions
The MIT License is extremely permissive. As a founder, you can use this code in commercial products, modify it, distribute it, and even sublicense it. The only requirement is to include the original copyright and license notice in your distribution. There are no copyleft clauses, meaning you don't have to open-source your own product if you use this code.
How to Use It
To install a local version of the extension for development, you'll first need to clone the repository and install its dependencies. Then, you can build the extension for your target browser (Chrome or Firefox).
Prerequisites:
- Node.js
- npm
Estimated setup time: 10 minutes.
git clone https://github.com/apollographql/apollo-client-devtools.git
cd apollo-client-devtools
npm install
npm run build -- --env TARGET=chromeWhat I'd Build With This
GraphQL Cache Diff & Snapshot Tool (micro-saas)
Build a specialized browser extension (or a web app that integrates with the underlying `window.__APOLLO_CLIENT__` API) allowing developers to take snapshots of their Apollo Client cache and query states. Users could then compare these snapshots over time or across different user actions to pinpoint unexpected data changes, memory growth, or performance regressions. Charge developers a monthly fee for advanced features like automated snapshotting in CI or cloud storage for historical data.
Effort: 2 Weeks Build Time · Target: Frontend Developers, QA Engineers · Pricing: $29/mo
Automated GraphQL Client Health Checks (saas)
Develop a CI/CD integrated service that runs headless browser tests on web applications. This service would inject custom scripts (inspired by how these devtools connect to Apollo Client) to inspect `window.__APOLLO_CLIENT__` state. It would then report on cache integrity, query performance anomalies, and unexpected network calls, alerting teams to client-side GraphQL regressions before they hit production. Charge based on test runs or monitored applications.
Effort: 3 Months Build Time · Target: DevOps Teams, Frontend Leads · Pricing: $99/mo
Custom Enterprise GraphQL Inspector (enterprise)
Offer custom development services to large organizations with complex GraphQL setups or internal frameworks. Based on this open-source codebase, you'd build tailored browser devtools extensions for them. These custom tools could integrate with internal monitoring systems, display domain-specific data, enforce coding standards, or provide specialized visualizations directly within their developer consoles. This would be a high-value consulting/development service.
Effort: 1 Month per Client · Target: Large Enterprises, Tech Consultancies · Pricing: $15,000+/project
Sai Pavan Gopularam's Take
This is the gold standard for how to build a browser devtool for a specific library. While the tool itself is a finished product, its codebase is a fantastic blueprint for building custom debugging extensions. You could definitely build a niche 'GraphQL Client Health Monitor' SaaS for $99/month by leveraging the same programmatic inspection techniques this tool uses.
Watch Out For
- Apollo Client Version Support: The devtools actively support the latest minor release of Apollo Client and do their best for older 3.x versions. If your app uses an older version (especially 2.x), you might encounter compatibility issues.
- Production Mode Configuration: By default, the devtools only appear in development mode. To enable them in production (e.g., for staging environments), you need to explicitly pass `connectToDevTools: true` to your ApolloClient constructor or manually attach your client instance to `window.__APOLLO_CLIENT__`.
- Debugging Tool, Not Monitoring: This is a client-side debugging tool for developers. While it gives great insights, it's not designed for real-time production monitoring or collecting metrics from end-users. You'd need a separate solution for that.
I break down trending repos like Apollo Client Devtools every week — join the newsletter.