How to change async atom

[chengfengfengwang]

const tasksAtom = atom(async() => await getTaskList());

function Main() {
  const [tasks] = useAtom(tasksAtom);
  const add = async () => {
    const newTask = {id:2,text:'new text'}
    const {success} = await submit(newTask);
    if (success) {
      // how to push newTask to tasksAtom ?
    }
  }
  return (
    <div>
      {tasks.map((item) => {
        return <div key={item.id}>{item.text}</div>;
      })}
      <div>
        <button onClick={add}>submit</button>
      </div>
    </div>
  );
}

Hello, I am new to Jotai. The async read atom is great, but I don't know how to update it. Besides the atomWithRefresh, how can I push new data to an async atom? I don't want to use atomWithRefresh because the data fetch is a bit slow

[dai-shi]

You can use atomWithDefault.

[chengfengfengwang]

Thanks! After reading the relevant documentation about atomWithDefault, I found a solution.

const tasksAtom = atom(async() => getTaskList());
const tasksAtom1 = atomWithDefault(async (get) => await get(tasksAtom));
function Main() {
  const [tasks1,setTasks1] = useAtom(tasksAtom1);
  const add = async () => {
    const newTask = {id:2,text:'new text'};
    //const {success} = await submit(newTask);
    setTasks1(async (prev) => {
      const o = await prev;
      return [...o, newTask]
    })
  }
  return (
    <div>
      {tasks1.map((item) => {
        return <div key={item.id}>{item.text}</div>;
      })}
      <div>
        <button onClick={add}>submit</button>
      </div>
    </div>
  );
}