Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: apollo client dev tools #1516

Draft
wants to merge 55 commits into
base: master
Choose a base branch
from

Conversation

frankcalise
Copy link
Contributor

@frankcalise frankcalise commented Oct 21, 2024

Please verify the following:

  • yarn build-and-test:local passes
  • I have added tests for any new features, if relevant
  • README.md (or relevant documentation) has been updated with your changes

Describe your PR

This PR not only adds feature parity with Flipper's plugin for Apollo dev tools, but adds a bunch of additional enhancements as well.

This is probably in a good enough state to send into alpha/beta to get some time on it while we finish out the remaining items.

Goals

  • Polls cache for updated values
  • Search cache keys
  • Search cache for some string across any property
  • Expand data pane by default (the web dev tools constantly collapses and it’s a nuisance)
  • Ability to pin keys to of interest in the left pane
  • Be able to follow __ref to another part of the cache
  • Forward/back navigation between viewing keys (like a browser page nav)
  • Open URL in browser if data is a URL
  • Tooltip the followed __ref data on hover (maybe down the road Supply the __ref data inline rather than having to follow it?)
  • Persist the viewed key history after leaving Apollo Client tab
  • Edit a cache key value from the UI (server sends client data to update the cache with)
  • Allow for quickly copying the viewed cache data to clipboard

Remaining Items

These aren't necessarily in any order, just what I had on my mind working through this feature.

  • Rework duplicated code into components
  • Fix flicker of state on initial RN app connection
  • Clear route param if cacheData becomes undefined (usually a hot reload thing)
  • Clear currently viewed key if search doesn't apply?
  • UI design (it's just functional at the moment, not pretty)
  • Copy object button
  • Fix types where they were skipped over
  • Track Apollo's queries and mutations run
  • Needs a merge from master

Screenshots

Screenshot Description
image Apollo client tab showing cache values from the Example App
image Pinned key values
reactotron-apollo-client-edit-cache.mp4
Edit cache values from Reactotron
reactotron-apollo-client-fwd-back.mp4
Forward and back navigation through selected key history
reactotron-apollo-client-refs.mp4
Tooltip on __ref or tap to follow them
reactotron-apollo-client-search.mp4
Search cache keys or the cache objects themselves

jyoes and others added 30 commits March 22, 2024 10:07
Developers can now toggle interface features based on what plugins the user has installed and active within their ecosystem.

Part of this was updating each library to have a `name` property. See example in the sidebar component for conditionally showing the Apollo sidebar button.
@frankcalise frankcalise changed the title Frankcalise/reactotron apollo client feat: apollo client dev tools Oct 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants