[Question] Implement write-through cache with atom effects that depends on an app-scoped (global) atom

[jschaf]

I'd like to implement a write-through cache for an atom using atom effects. The problem is that the atom depends on another global atom and AtomEffect doesn't provide a get method. Full details below:

I have an app-global, productRepoAtom (defined below), that provides access to a remote API. This atom is initialized via RecoilRoot.

/** The product repo to send RPCs about products. */
export const productRepoAtom = atom({
  key: 'productRepo',
  default: null! as product.Repo, // set early in app init
});

const App = (props) => {
  const initRecoilState = (ms) => ms.set(productRepoAtom, props.productRepo);
  return (<RecoilRoot initializeState={initRecoilState}>{"Rest of app"}</RecoilRoot>);
}

I'd like to use productRepoAtom for other atoms, like an activeProduct atom that fetches and caches the currently active product. Right now, I've impelemented activeProduct as a selectorFamily solely so I can use get on productRepoAtom.

/** Atom to fetch and cache a product by name from the server. */
const activeProduct: (p: resources.ProductName) => RecoilState<Product> =
  atomFamily({
    key: 'ProductDetail/ActiveProduct',
    default: selectorFamily({
      key: 'ProductDetail/ActiveProduct/Default',
      get: (name: resources.ProductName) => ({get}) => {
        return get(productRepoAtom).findProduct(name);
      },
    }),
  });

The problem is that I can't figure out how to implement a write-through cache for activeProduct. Since activeProduct is a selectorFamily I can't use atom effect but I need a selector family to call get on the productRepoAtom.

Here's what I'd like to write:

const cacheEffect = (p: resources.ProductName): ReadonlyArray<AtomEffect<Product>> => [
  // NOTE: added `get` here.
  ({setSelf, get, onSet, trigger}) => {
    if (trigger === 'get') {
      setSelf(get(productRepoAtom).findProduct(p));
    }
    onSet(newValue => {
      if (newValue instanceof DefaultValue) {
        return; // don't send updates for initial state
      }
      get(productRepoAtom).updateProduct(newValue, [])
        .catch(console.error);
    });
  },
];

/** Atom to fetch and cache a product by name from the server. */
const activeProduct: (p: resources.ProductName) => RecoilState<Product> =
  atomFamily({
    key: 'ProductDetail/ActiveProduct',
    effects_UNSTABLE: cacheEffect,
    default: null! as Product, // set in effect
  });

Q1: How do I implement a write-through cache for an atom if it depends on another atom? I think there's 3 options:

1. Store productRepo in a global variable and access it directly instead of with an atom. I don't like this approach because it introduces global state in the app. I don't think I can use React context here either. I can't think of a way to dependency inject the productRepo.

2. Push the cache down into productRepo. I'd prefer to keep caching high up in the stack and recoil seems particularly well suited to handling a cache with atom effects.

3. I've missed something in Recoil would be the best option.

[drarmstr]

We've contemplated adding something like a getSnapshot() method to the Atom Effect interface to allow accessing other values. The concern so far has been that this may introduce opportunity for bugs. In most places in Recoil, such as selectors, it tries to ensure automatic consistency of state. If an atom changes values then any selectors or components will automatically update based on the new value. Getting a value in an effect doesn't introduce any subscriptions, so it would not cause the atom effect's logic to re-evaluate based on the new dependent atom. This may or may not be intended and is an ongoing discussion.

@csantos42, have you thought of any cleaner approaches for your use-cases?

[jonaswre]

@drarmstr I kind of have the same issue. Lets imagine I have a app that manages Students and Classes. I can only request classes by ID, Students are an array inside of the classes. But I want to track each student in its own atom. I can create the Class in the effect using setSelf. To create the student i would need to get the class in the student effect, or set a student atom from the class effect. I thinks there are lots of use cases where one would need to create any number of other atom that depend on the one you are creating.

[drarmstr]

Current debate is if the ability to initiate a transaction, which allows reading and writing from multiple atoms/selectors, would make sense here. It should satisfy your use-cases and would be better than a Snapshot or get accessor, as it would be lower overhead and might help avoid bugs from the perception of the effect subscribing to state changes. Concern is if it's potentially too risky for bugs to allow transactions from an atom effect to effect other atoms..