Approach to atomising tree structured data

[dpeek]

Hi there! I have a high-level question about Recoil usage, essentially about fetching remote data and atomising for usage within an app.

I've struggled to put it into words, but I think the below captures the essence of the problem.

Suppose I have a document editing app with the following schema:

type Document = {
  id: string;
  name: string;
  blocks: Array<Block>;
}

type Block = {
  id: string;
  name: string;
  value: string;
}

I'd like to be able to access documents using an atom:

export const documentState = atomFamily<Document, string>({
  key: 'document',
  default: (id) => fetchDocument(id),
});

Since the main thing my app works with is blocks, I'd also like to reference those in the same way, particularly as this will isolate updates in a large document:

export const blockState = atomFamily<Block, string>({
  key: 'block',
  default: (id) => fetchBlock(id),
});

Is there any way to acheive this without resorting to useRecoilCallback to handle loading and setting of atoms? That is the approach I'm using at the moment, but it complicates the code as you need to know what is local and what is not before accessing an atom.

It seems like I need a default handler (or get handler on a selector) that can also set other atoms, so that I can do something like this:

(id) => async ({set}) {
  const existing = getCachedDocument(id);
  if (existing) return existing;

  const document = await fetchDocument(id);
  setCachedDocument(id, document);
  document.blocks.forEach(block => {
    set(blockState(block.id), block);
  });
  set(documentState(document.id), remote);
  return document;
}

It feels like I might be missing something fundamental about the recoil way of doing things. I would really appreciate any suggestions or recommended reading :)

[drarmstr]

I don't have the full context of your usage. But, the example above uses the pattern of a selector to allow for querying default initial values for atom state. But, I'm gathering that the pattern you need is more like a write-through cache of the document data with a remote store? If that's the case consider this example

[dpeek]

Thanks for your answer, the example looks like what I need :)