1. Mutations

就是用来进行编辑、删除、新增请求的操作

    const mutation = useMutation({
        mutationFn: (newTodo) => {
          return axios.post('/todos', newTodo)
        },
    })
    // mutate参数只有一个，要么是一个对象要么就是一个值
    mutation.mutate({ id: new Date(), title: 'Do Laundry' })

2. useMutation配置

大部分和useQuery一样，有些特殊的。

1. 副作用，一些回调函数

/*
    useMutation和mutate里面都可以设置，但是有先后顺序
    当回调返回的是promise的时候，下一个回调会等待前一个回答执行完
*/
const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: (data, variables, context) => {
    // 先触发
  },
  onError: (error, variables, context) => {
    // 先触发
  },
  onSettled: (data, error, variables, context) => {
    // 先触发
  },
})


mutation.mutate(todo, {
  onSuccess: (data, variables, context) => {
    // 再触发
  },
  onError: (error, variables, context) => {
    // 再触发
  },
  onSettled: (data, error, variables, context) => {
    // 再触发
  },
})

2. 批量执行

useMutation({
  mutationFn: addTodo,
  // 因为`mutationFn`都是异步的，所以顺序可能不一样
  onSuccess: (data, error, variables, context) => {
    // 执行3次
  },
})


[('Todo 1', 'Todo 2', 'Todo 3')].forEach((todo) => {
  mutate(todo, {
    onSuccess: (data, error, variables, context) => {
      // 只会执行最后一次 (Todo 3),
      // 不管哪个先执行完
      // 因为每次执行mutate都会卸载监听，重新监听
    },
  })
})

3. 异步mutate

const mutation = useMutation({ mutationFn: addTodo })
try {
  const todo = await mutation.mutateAsync(todo)
  console.log(todo)
} catch (error) {
  console.error(error)
} finally {
  console.log('done')
}