How to refresh/invalidate an asynchronous selector?

Selectors can be used to asynchronously fetch data from an API. But how is it possible to trigger a re-fetch of this data?

Given this selector:

const todosState = selector({
  key: "todosState",
  get: async () => {
    const result = await fetch("https://example.com/todos");
    const todos = await result.json();
    return todos;
  },
});

In a scenario where a user wanted to reload his todos, because he knows his coworker added a new todo to the list. How would he trigger this selector to re-fetch the todos from the API?

[philippta]

@acutmore Thanks for your suggestion. Although your code works as intended, it feels more like a workaround instead of an official solution. I genuinely thought this update could be triggered using the useResetRecoilState() function.

An obvious way to make this less of a workaround would be to simply use an atom and handle the update manually. However, I really like the concept of the Data Flow Graph mentioned in the doc, which makes data fetching really declarative and implicit for the consumer of the selector.

How about adding a re-evaluate feature to the API, either with useResetRecoilState() or with a new function in the selector options?

[acutmore]

Hi @philippta. I agree, does feels more like a workaround. Maybe someone from the Recoil team will have a more official solution.

I had another go using useResetRecoilState. Calling reset sets an Atom’s value back to the default: ... value in the Atom’s config, or calls a selector’s set passing in Recoil’s DefaultValue. I had a go and selectors do not seem to support async set. So this gets back to synchronously updating an atom to force a selector’s async get to re-run.

const todosTrigger = atom({
  key: "todosTrigger",
  default: 0
});

const todosSelector = selector({
  key: "todosSelector",
  get: async ({ get }) => {
    get(todosTrigger);
    return await getTodos();
  },
  set: ({ set }, value) => {
    if (value instanceof Recoil.DefaultValue) {
      set(todosTrigger, v => v + 1);
    }
  }
});

function Todos() {
  const todos = useRecoilValue(todosSelector);
  const reset = useResetRecoilState(todosSelector);
  console.log(todos);
  return <button onClick={() => reset()}>Reset</button>;
}