Optimistic updates are flashing

[chertik77]

I have functionality that changes card column based on user selection. It does an api call and I'm trying to optimistically update the card column.

export const useChangeCardColumn = () => {
  const queryClient = useQueryClient()

  const { boardId } = useGetParamBoardId()

  return useMutation({
    mutationFn: cardService.changeCardColumn,
    onMutate: async ({ cardId, newColumnId }) => {
      await queryClient.cancelQueries({
        queryKey: ['board', boardId]
      })

      const previousBoard = queryClient.getQueryData<BoardTypes.BoardSchema>([
        'board',
        boardId
      ])

      queryClient.setQueryData<BoardTypes.BoardSchema>(
        ['board', boardId],
        oldBoard =>
          oldBoard && {
            ...oldBoard,
            columns:
              oldBoard.columns &&
              oldBoard.columns.map(column => ({
                ...column,
                cards: column.cards.map(card =>
                  card.id === cardId ? { ...card, columnId: newColumnId } : card
                )
              }))
          }
      )

      return { previousBoard }
    },
    onError: (_, __, context) => {
      queryClient.setQueryData(['board', boardId], context?.previousBoard)
      toast.error(
        'An error occurred while moving the task. Please try again shortly.'
      )
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ['board', boardId]
      })
    }
  })
}

However, with this approach if I move the card to a new column and then return it back, I want the card to return to the same position where it was moved off, but it's flashing to the first position.

Screen.Recording.2025-05-12.at.18.07.09.mov

But without any optimistic updates, just with backend call it works as expected.

Screen.Recording.2025-05-12.at.18.10.01.mov

So the problem is inside my optimistic updates, do you know what I'm doing wrong here? Why is it flashing?

[TkDodo]

maybe have a read here:

• https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query

[chertik77]

maybe have a read here:

• https://tkdodo.eu/blog/concurrent-optimistic-updates-in-react-query

Hey, thanks for your response! Your article is great, but i don't get it, could you please clarify what I supposed to do in my situation?

 onSettled: () => {
      if (queryClient.isMutating({ mutationKey: ['items'] }) === 1) {
        queryClient.invalidateQueries({
          queryKey: ['board', boardId]
        })
      }
    }

This if statement doesn't help

[TkDodo]

Your optimistic update adds the cart at the beginning of the list so of course it shows up on the top. You're likely not doing the exact same thing as you do on the backend

[chertik77]

Your optimistic update adds the cart at the beginning of the list so of course it shows up on the top. You're likely not doing the exact same thing as you do on the backend

Here is backend code

    const updatedCard = await prisma.card.updateIgnoreNotFound({
      where: { id: cardId },
      data: { columnId: column.id }
    })

I receive card id and new column id where the card was moved off. It's basically the same as with optimistic updates, i just change the card column id. The second video I sent it's just with backend logic, it works as expected, but doesn't happen instantly. When i'm returning the card to it's original column, i want to maintain the same card order, but it's flicking to the top and then get's back in like on the first video clip.

[TkDodo]

I can’t dig any further with just code snippets and videos, sorry. Please provide a minimal, isolated, runnable reproduction in stackblitz or codesandbox.