apollo-client-devtools
Advanced tools
Developer tools for Apollo Client, with Studio Explorer integration, cache inspection, and query watching.
This repository contains the Apollo Client Browser Devtools extension for Chrome & Firefox.
| ☑️ Apollo Client User Survey |
|---|
| What do you like best about Apollo Client? What needs to be improved? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better. |
Chrome users can install the extension by visiting the Chrome Web Store.
Opera users can install the extension from Chrome Web Store using the Download Chrome Extension addon for Opera.
Firefox users can install the addon via Firefox Browser Add-ons.
If you want to install a local version of the extension instead, skip ahead to the Developing section.
The Apollo Client Browser Devtools appear as an "Apollo" tab in your web browser inspector, alongside other tabs like "Elements" and "Console". The devtools currently have four main features:
if you are using an older version of Apollo Client and have issues with our Client Browser Devtools we recommend you upgrade to the latest version of Apollo Client.
3.x versions of Apollo Client for use with our Client Browser DevTools.2.x versions of Apollo Client for use with our Client Browser DevTools.While your application is in dev mode, the devtools will appear as an "Apollo" tab in your web browser inspector. To enable the devtools for your application in production, pass connectToDevTools: true to the ApolloClient constructor in your application. Pass connectToDevTools: false if want to manually disable this functionality.
The "Apollo" tab will appear in your web browser inspector if a global window.__APOLLO_CLIENT__ object exists in your application. Apollo Client adds this hook to the window automatically unless process.env.NODE_ENV === 'production'. If you would like to use the devtools in production, manually attach your Apollo Client instance to window.__APOLLO_CLIENT__ or pass connectToDevTools: true to the constructor.
If you are seeing the "Apollo" tab but are still having issues, skip ahead to the Debugging section.
Before building the extension you should install dependencies:
# Install dependencies
> npm install
# (Optional) build the extension for local use
> npm run build -- --env TARGET=chrome
# or
> npm run build -- --env TARGET=firefox
# Or generate zipped distributables (already includes the above build step)
> npm run dist:chrome
# or
> npm run dist:firefox
We use Jest and React Testing Library to write and run our tests.
To run tests for both src and development, run the following command:
npm run test
You can also run with --watch to watch and re-run tests automatically:
npm run test:watch
This project is governed by the Apollo Code of Conduct.
Apollo builds open-source software and a graph platform to unify GraphQL across your apps and services. We help you ship faster with:
Check out the Odyssey learning platform, the perfect place to start your GraphQL journey with videos and interactive code challenges. Join the Apollo Community to interact with and get technical help from the GraphQL community.
| Name | Username |
|---|---|
| Ben Newman | @benjamn |
| Alessia Bellisario | @alessbell |
| Jeff Auriemma | @bignimbus |
| Hugh Willson | @hwillson |
| Jerel Miller | @jerelmiller |
| Lenz Weber-Tronic | @phryneas |
4.17.2
#1456 d49777f Thanks @github-actions! - add error codes for new Apollo Client version
#1458 7bebb72 Thanks @jerelmiller! - Fix serialization of functions in context
FAQs
Developer tools for Apollo Client, with Studio Explorer integration, cache inspection, and query watching.
The npm package apollo-client-devtools receives a total of 244 weekly downloads. As such, apollo-client-devtools popularity was classified as not popular.
We found that apollo-client-devtools demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.