Add support for reactive variables

[hwillson]

Migrated from: #337

I use Reactive Variables to manage my local state and I cannot inspect reactive variables in apollo devtools even when I use typePolicies.

It would be nice to see values in the cache tab, especially when I've added some client fields to existing entity. I understand that technically this values are not part of the cache, but I think it could've been marked as local or something.

Also I would like to have an ability to inspect reactive variables, maybe as a different tab, where all variables are listed (display name support?).

Also I'd like to add that previous approach, using client resolvers worked with devtools

[chrismowbraybv]

+1 for this!

[rektide]

Neither the Graphiql tab nor the Cache tab in Apollo DevTools show reactive variables.

We did thankfully discover that the Queries tab, if you go to it's Cached Data view, includes any queried for reactive variables. This example screenshot is from the apollo-local-state example, showing what that looks like in action:

I don't know if this makes a difference, but we do have type field policies defined under the top level Query that expose these reactive variables. When we go to the root query we rather expected these local-only fields to be shown, but they, nor any other local-only fields, are shown. Changing this might be worth creating a new discussion thread, but for now, I am attaching this only as a note to this Reactive Variables ticket, as all of our local-only fields are for reactive-variables.

It would be an enormous improvement to the Apollo DevTools to show Reactive Variables, and to show Local-Only fields.

[aancer-rca]

Hi @hwillson,

I'm relatively new to AC3 and really wanted to be able to introspect the reactive variables and have a mutation history listed in the Dev Tools myself so here's what I did ( I'm new to AC3 so improvements could likely be made here ) in the interim.

I created a wrapper function that essentially fires a writeQuery ( write to cache ) and a Mutation. Whenever I manipulate my reactive variable, I use this wrapper function to do so. The changes are tracked in Apollo Dev Tools as we fire a mutation for every reactive variable modification through this wrapper and the cache is modified as such.

/* This function is used in the interim to increase transparency into the reactive variables changes.
 ** Mutations to cached variables should be made via this function to provide the tracked changes in Apollo Dev Tools.
 ** In the function we:
 ** - set the Reactive Variable
 ** - call our mutation
 ** - write the new data to the cache
 */
export const mutateInCache = (client: NormalizedApolloClient, clientVar: IClientVariable, payload: any) => {
  if (!client) throw new Error('mutateInCache: client parameter required.');
  if (!clientVar) throw new Error('mutateInCache: clientVar parameter required.');
  if (!payload) throw new Error('mutateInCache: payload parameter required.');

  const existingData = clientVar.variable();
  clientVar.variable({ ...existingData, ...payload }); // Reactive Variable changes
  client.mutate({ mutation: clientVar.mutation, variables: payload }); // Mutation runs ( in dev tools )

  const data = {};
  data[clientVar.cacheKey] = { ...existingData, ...payload }; // Creating data object

  // Writing to Cache variable with new data
  cache.writeQuery({
    query: clientVar.query,
    data: data
  });
};

I set up my cache variables like so:

import { gql, makeVar } from '@apollo/client';
import { IUser } from '@common';

export const initialUserValue: IUser = {
  id: 0,
  name: 'Anonymous',
  isManager: false
};

export const activeUserVar = makeVar<IUser>(initialUserValue);

export const activeUserClientVar = {
  cacheKey: 'ActiveUser',
  variable: activeUserVar,
  query: gql`
    query GetActiveUser {
      ActiveUser @client
    }
  `,
  mutation: gql`
    mutation UpdateActiveUser($input: activeUserInput!) {
      updateActiveUser(input: $input) @client
    }
  `
};

The activeUserClientVar variable properties are as follows:

• CacheKey relates to the TypePolicy field name you specify
• Variable is the ReactiveVariable you initialize
• Query is the your query definition
• Mutations is the your base query mutation definition

This is just a primary solution for the interim. I really hope that the Apollo team weighs in and provides introspection for reactive variables because they are very powerful and it's difficult to track changes across a complex application without said changes in Apollo Dev Tools. I know this is not a solution but hopefully this helps tide you over while they work on the feature request.

Note:
As an improvement, I could probably add the activeUserClientVar along with other client variables that I set up to a dictionary and when I call the mutateInCache function I rather call:

mutateInCache(apolloClient, 'ActiveUser', user); 

And get the cacheKey and associated client variables from said dictionary in the wrapper. Instead of:

mutateInCache(apolloClient, activeUserClientVar, user);

[DrBoria]

In response
I've made react hook based on your solution

import { ApolloClient, DocumentNode, OperationVariables, ReactiveVar, gql, makeVar, useApolloClient, useReactiveVar } from '@apollo/client';


type TGlobalVariables = 'ModalData';

/**
 * 
 * @param client - Apollo Client from keystone apollo provider
 * @param clientVar - Variable that will be updated
 * @returns void
 * 
 * Main Idea of the funciton is to uptade passed variable and store information about it in Apollo dev tools
 */
const updateAndLog = <T>(client: ApolloClient<object>, clientVar: {
  variable: ReactiveVar<T>;
  query: DocumentNode;
  mutation: DocumentNode;
}) => (payload: unknown) => {
  if (!clientVar) throw new Error('mutateInCache: clientVar parameter required.');
  if (payload === undefined) throw new Error('mutateInCache: payload parameter required.');

  clientVar.variable(payload as T); // Reactive Variable changes
  client.mutate({ mutation: clientVar.mutation, variables: payload as OperationVariables }); // Mutation runs ( in dev tools )

  // Writing to Cache variable with new data
  client.writeQuery({
    query: clientVar.query,
    data: payload
  });
};


const useGlobalVariable = <T>(variable: ReactiveVar<T>, name?: TGlobalVariables): [T, (payload: unknown) => void] => {
  const client = useApolloClient();

  const setModalDataClientVar = {
    variable: variable,
    query: gql`
    query Get${name} {
      ${name} @client
    }`,
    mutation: gql`
    mutation Variable_Update_${name}($input: modalDataInput!) {
      update${name}(input: $input) @client
    }`
  };

  const reactiveVar = useReactiveVar(variable) as T;
  return [reactiveVar, updateAndLog<T>(client, setModalDataClientVar)]
}

type TModalData = { listName: string, id: string } | null;
const ModalData = makeVar<TModalData>(null);
export { ModalData, useGlobalVariable }

Usage

const [modalData, setModalData] = useGlobalVariable(ModalData, 'ModalData');

[ThaneshR]

Hello, I was wondering if there's any update on this ticket 🙂

[DrBoria]

Hello, I saw this post, so is there any updates to see reactiveVariables in devtools?
#1241

I don't want to add mobx or redux to app where I've already have apollo, but without devtools support reactive variables looks same unsupported as react context/provider.

[jerelmiller]

Hey @DrBoria 👋

We've had a lot of discussions internally about this and are split on whether to support them or not. I don't want to give too much away yet for fear of putting information out there that may not end up being accurate, but we've held off on supporting them in devtools for a reason.

We've been working on some other features in the meantime to try and provide some functionality thats also been popular asks, like the ability to support multiple clients in the devtools.

I'm sorry I don't have better news for now, but will keep this updated as we come to a final decision on this.