Async selector set function

Hello dear Recoil team! Using Recoil for the production application and loving it so far. Just one specific clarification.

In turns out that I can’t have a async selectorFamily set function, example below

const filtersSelector = selectorFamily({
  key: 'filtersSelector',
  get: (filterField: string) => ({ get }) => get(filtersState)[filterField],
  set: (filterField: string) => async ({ set, get }, newVal) => {
    const filterTerms = {
      ...get(filtersState),
      [filterField]: newVal,
    } as FilterTypes;

    const setter = (prevValue: FilterTypes) =>
      ({ ...prevValue, [filterField]: newVal } as FilterTypes);

    set(filtersState, setter);

    const data = await getPhoneNumbers(filterTerms);

    set(phoneNumbersState, data);
  },
});

This code snippet works this way, the filtersState set function works and sets new filter terms, after that the getPhoneNumbers request works (I can see it in the network tab) but the last phoneNumbersState set function does not change the state even though if I write

  set(phoneNumbersState, updateFunc);

the updateFunc gets invoked but I can’t see state updates after that

Thanks in advance!

[drarmstr]

This issue keeps coming up with users attempting async selector sets and either not having or ignoring static type-checking errors. So, while we are considering if we should add support for this, add dynamic error reporting by throwing errors if async sets are attempted in #777

[otakustay]

As a state normalization zealot, we very much want an async selector to load a remote data and to pass them forward to atoms like:

const users = atomFamily({key: 'user'});
const list = selectorFamily({
    key: 'users',
    // Want a set function here
    get: ({set}) => async params => {
        const users = await fetchRemoteUsesrs(params);
        for (const user of users) {
            set(users(user.id), user);
        }
        // Normalize it to a list of keys
        return users.map(u => u.id);
    },
});

This requires features similar to this issue, currently we do it in a recoil callback way without suspense support:

const users = atomFamily({key: 'user'});
const list = atomFamily({key: users});
const useListUsers = () => useRecoilCallback(
    ({snapshot, set}) => async params => {
        const current = snapshot.valueMayBe(users(params));

        if (current) {
            return current;
        }

        const users = await fetchRemoteUsesrs(params);
        for (const user of users) {
            set(users(user.id), user);
        }
        // Normalize it to a list of keys
        return users.map(u => u.id);
    },
    []
);

This still raise 2 questions to us:

1. Is the use of snapshot safe in this way? Does it cause some race condition in edge cases?
2. How can we cooperate this pattern to suspense’s promise throwing pattern?

Still, is selector and selectorFamily can support this natively, recoil could be a best practice in async state management.