Add entries to internal cache

I’m using a store to fetch entities organised in a tree structure. Each entity is identified by a path and can either be, let’s say a folder or a file (but I don’t know which one in advance).

To save network requests, when I fetch a folder, the response already includes the files it contains. What I’d like to do is to store those files in the store’s internal cache against their respective paths, so that if they are ever requested directly, they do not get fetched again.

Right now, I’m achieving this behaviour by wrapping the fetch function I’m passing to the store and maintaining my own child cache:

const childCache = new Map<string, Entity>();

const store = createFetchStore(async (path: string) => {
  const cachedEntity = childCache.get(path);
  if (cachedEntity) {
    return cachedEntity;
  }

  const entity = await fetchEntity(path);

  if (isFolder(entity)) {
    // Cache children ...
    entity.children.forEach((child) => {
      // ... except sub-folders, since we do want those to be re-fetched fully (with their children)
      if (!isFolder(child)) {
        childCache.set(child.path, child);
      }
    });
  }

  return entity;
});

This code could be simplified a lot if I had a way to add entries to the store’s internal cache. My initial thought was that store.prefetch() could perhaps receive a resolved value as second argument. 🤷

[dai-shi]

https://www.npmjs.com/package/react-suspense-fetch/v/0.6.0

[axelboc]

Works like a charm, thanks a lot! ✨