Nested loadable atom batching

[aliechti]

I would like to fetch multiple atoms at once.

Simplified example

I have contents wich have components. A content can be fetched in one go and gets all its components, because there could be hunderds of components which would result in hundreds of single requests to the db. The components can also be updated independently, this must be reflected in the content too. The whole thing is synced to the server.

Data

contents
  components

What I've tried

1. Use a selectorFamily for the content to merge the atoms in get/set. But where do I fetch the API?
2. Use a atomFamily for the content with default to a selector, which does the fetch. But how do I set/sync the other atoms?
3. Same as above, but solved with selectors for the components. This has the disadvantage that every change does a change to the whole tree and is against the recoil concept.

Example for 1.

interface Content {
    id: string;
    components: Component[];
    // many more
}

interface Component {
    id: string;
    // many more
}

const contentStateAtom = atomFamily<Component, { contentId: string; }>({
    key: 'ContentState',
});

const componentAtom = atomFamily<Component, { contentId: string; componentId: string }>({
    key: 'Component',
});

const contentComponentIdsAtom = atomFamily<string[], { contentId: string }>({
    key: 'ContentComponentIds',
});

const contentSelector = selectorFamily<Content, { contentId: string }>({
    key: 'ContentState',
    get: ({contentId}) => ({get}) => {
        // Where to fetch?
        // Get state
        const contentState = get(contentStateAtom({contentId}));
        const ids = get(contentComponentIdsAtom({contentId}));
        const components = get(waitForAll(ids.map((componentId) => componentAtom({contentId, componentId}))));
        return {
            ...contentState,
            components,
        };
    },
    set: ({contentId}) => ({set}, newValue) => {
        if (newValue instanceof DefaultValue) {
            // Solve this later
            return;
        }
        const {components, ...state} = newValue;
        set(contentComponentIdsAtom({contentId}), components.map(({id}) => id));
        set(contentStateAtom({contentId}), {
            ...state,
        });
        components.map((component) => {
            set(componentAtom({contentId, componentId: component.id}), component);
        });
    },
});

[drarmstr]

You can also use things like useRecoilCallback() to set multiple atoms based on an async query. Or something like recoil-sync to batch store transactions.