how to cancel / disable previous mutation onSuccess calls?
For now the best I could come up with is this:
Keep in mind that this is using solidjs, hence the raw mutationCounter.
The createTodo returns an array of todos.
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.
