Description
consider the following three selectors:
// async selector
export const selector3 = selectorFamily({
key: 'selector3',
get:
(config) =>
async ({ get }) => {
// change in dependent atom retriggers this selector
const dependencyValue = get(dependentAtom);
return dependencyValue;
},
});
const staticResponse = { static: true };
//sync selector
export const selector2 = selectorFamily({
key: 'selector2',
get:
(config) =>
({ get }) => {
get(selector3(''));
// returning static response from this selector such that selector1 should not re trigger upon any change in value returned by selector3
return staticResponse;
},
});
// async selector
export const selector1 = selectorFamily({
key: 'selector1',
get:
(queryConfig) =>
async ({ get }) => {
get(selector2(queryConfig));
// mimicking a api call
await new Promise((res) => setTimeout(res, 5000));
},
});
In the above example, we have three selectors i.e. selector1, selector2, selector3 respectively. selector1(async) has a dependency of selector2(sync) and selector2
has a dependency for selector3(async). Let's assume that selector1 is used in a react component. Ideally when selector1 is trigerred and is waiting for the api call response,
any change in the selector2(due to change in dependentAtom in selector3) should not retrigger theselector1 as selector2 always returns a static response.
But in actutal implementation the synchronous selector2 is not able to handle errors well due to asynchronous selector3 as its dependency, and cause re trigger of selector1,
which make the apis to be called multiple times instead of once. This should not have happened as none of the dependencies values for selector1 has changed.