Reactive Var Tab

[ThaneshR]

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 in the apollo-client repo doesn't expose a way to read/listen to it for any changes, I created a wrapper around makeVar. Here's the makeVar wrapper code:

const subscribeToReactiveVar = <A>(reactiveVar: ReactiveVar<A>, 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 = <B>(state: B, namespace: string): ReactiveVar<B> => {
  if (isProduction()) return makeVar(state);

  const reactiveVar: ReactiveVar<B> = 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.

[jerelmiller]

Hey @ThaneshR 👋

Before you submit a PR, I think we'd love to discuss as a team what we are looking for in the Reactive Vars tab. I know this is a requested feature and definitely agree it would be useful! I'd hate for you to spend a ton of work adding something that we may want significant changes on. But we are definitely open for collaborating on this!

I think there is a lot we could do here, especially considering they can be used with cache read functions. I think it would be awesome to indicate this in the Cache tab somehow as well. As a first start though, just showing the variables and their values would be great!

To avoid users needing to wrap their own reactive vars, I think we'll probably want to add some code to Apollo Client itself to expose that data to the devtools. Unfortunately we don't have a lot of great ways to do this yet in the client to avoid bloating it with a ton of devtools-only code. We'll be exploring how we want to do this soon.

Thanks for the interest here!