apollographql / apollographql/apollo-client-devtools
Reactive Var Tab
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 172
- Avg merge
- 10m
- Merged PRs (30d)
- 8
Description
Hey,
This isn't really an issue but wondering if you're open to having a PR to include a new tab in the `apollo-client-devtools` extension that shows state changes made to any reactive vars. I created an enterprise-only extension that does this and was wondering if it could be incorporated into the extension itself.
I'll explain below how my enterprise-only extension works.
Since the [reactiveVar](https://github.com/apollographql/apollo-client/blob/fc949bb907bf1f3efc5ea102d62de847e4af043c/src/cache/inmemory/reactiveVars.ts#L6) in the `apollo-client` repo doesn't expose a way to read/listen to it for any changes, I created a wrapper around [makeVar](https://github.com/apollographql/apollo-client/blob/fc949bb907bf1f3efc5ea102d62de847e4af043c/src/cache/inmemory/reactiveVars.ts#L57). Here's the `makeVar` wrapper code:
```ts
const subscribeToReactiveVar = (reactiveVar: ReactiveVar, namespace: string) => {
const onChange = (state: A) => {
if (!window) return;
const event = new CustomEvent("rv-live-view", {
detail: {
date: new Date().toDateString(),
time: format(new Date(), "h:mm:ss aaa"),
namespace,
state,
},
});
window.dispatchEvent(event);
};
const subscribe = (state: A) => {
onChange(state);
reactiveVar.onNextChange(subscribe);
};
reactiveVar.onNextChange(subscribe);
};
const makeFSVar = (state: B, namespace: string): ReactiveVar => {
if (isProduction()) return makeVar(state);
const reactiveVar: ReactiveVar = makeVar(state);
subscribeToReactiveVar(reactiveVar, namespace);
return reactiveVar;
};
```
In essence, any changes made to the reactive var will now emit a custom-event in non-production mode. The extension listens for the custom-events and records them. That's basically it 😄
Here's a screenshot of the enterprise-only extension's UI:
I'm open to changing it to ensure it works well with the apollo-client-devtools extension. I thought of asking first if you folks are interested in such a PR before I work on it. Note, adding the makeVar wrapper would require changes in the `apollo-client` repo.
Contributor guide
Research direction
Start with src/cache/inmemory/reactiveVars.ts in the linked apollo-client revision, especially makeVar and ReactiveVar.onNextChange, then inspect the devtools extension's existing custom-event handling. Define how reactive-var changes should be exposed across the apollo-client and devtools repositories, and consider the supplied wrapper and UI screenshot as the proposed behavior. Done should include an agreed integration design and a working Reactive Var tab.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- devtools
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100