// Handle Delete Mutation to Update Optimistic Updates
  const deleteMutation = useMutation({
    mutationFn: deleteTodoFn,
    onMutate: async (id) => {
      // Cancel any outgoing refetches
      await queryClient.cancelQueries({ queryKey: ['todos'] })

      // Snapshot the previous value
      const previousTodos = queryClient.getQueryData<Todo[]>(['todos'])

      // Optimistically remove the todo from the array
      let updatedTodos: Todo[] = []

      if (previousTodos) {
        updatedTodos = [...previousTodos].filter((todo) => todo.id !== id)
      }

      queryClient.setQueryData<Todo[]>(['todos'], updatedTodos)

      // Return a context object with the snapshotted value
      return { previousTodos }
    },

    // If the mutation fails, use the context we returned above
    onError: (context: { previousTodos?: Todo[] | undefined }) => {
      queryClient.setQueryData<Todo[]>(['todos'], context.previousTodos)
    },

    // Always refetch after error or success:
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    }
  })