T
TanStack•2y ago
adverse-sapphire

how to cancel / disable previous mutation onSuccess calls?

For now the best I could come up with is this: 
let mutationCounter = 0
const addTodo = createMutation(() => ({
  mutationFn: api.createTodo,
  async onMutate(newTodoTitle: string) {
    const previousTodos = queryClient.getQueryData<api.Todo[]>(["todos"]) ?? []

    const newID = Math.floor(Math.random() * 1000)
    const newTodo = { id: newID, title: newTodoTitle, done: false }
    const newTodos = [...previousTodos, newTodo]

    queryClient.setQueryData(["todos"], newTodos)

    mutationCounter++
    return { previousTodos, todoCounter: mutationCounter }
  },
  onError(_err, _newTodo, context) {
    queryClient.setQueryData(["todos"], context?.previousTodos)
  },
  onSuccess(data, _vars, context) {
    let isLatest = context?.todoCounter === mutationCounter
    if (isLatest) {
      queryClient.setQueryData(["todos"], data)
    }
  },
}))
let mutationCounter = 0
const addTodo = createMutation(() => ({
  mutationFn: api.createTodo,
  async onMutate(newTodoTitle: string) {
    const previousTodos = queryClient.getQueryData<api.Todo[]>(["todos"]) ?? []

    const newID = Math.floor(Math.random() * 1000)
    const newTodo = { id: newID, title: newTodoTitle, done: false }
    const newTodos = [...previousTodos, newTodo]

    queryClient.setQueryData(["todos"], newTodos)

    mutationCounter++
    return { previousTodos, todoCounter: mutationCounter }
  },
  onError(_err, _newTodo, context) {
    queryClient.setQueryData(["todos"], context?.previousTodos)
  },
  onSuccess(data, _vars, context) {
    let isLatest = context?.todoCounter === mutationCounter
    if (isLatest) {
      queryClient.setQueryData(["todos"], data)
    }
  },
}))
Keep in mind that this is using solidjs, hence the raw mutationCounter. The createTodo returns an array of todos.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?