Item is showing back in the UI after deletion

[RoyBenAviv]

I am new to React Query and I am trying to delete an item and immediatly update the UI.

This is my custom hook for deletion:

export const useDeleteItem = (currentBoardId: string) => {
  const queryClient = useQueryClient()
  return useMutation(
    (itemsId: (string | undefined)[]) => {
      return axios.delete(`${BASE_URL}/api/items`, { data: itemsId })
    },

    {
      onMutate: async (itemsId: (string | undefined)[]) => {
       await queryClient.cancelQueries({ queryKey: ['board', currentBoardId] })
        const prevBoard = queryClient.getQueryData<Board>(['board', currentBoardId])
        console.log('file: useQuery.ts:285 -> prevBoard:', prevBoard)
        const filteredBoard = {
          ...prevBoard,
          groups: prevBoard!.groups.map((group) => ({
            ...group,
            items: group.items.filter((item) => !itemsId.includes(item.id)),
          })),
        }
        console.log('file: useQuery.ts:286 -> filteredBoard:', filteredBoard)
        queryClient.setQueryData(['board', currentBoardId], filteredBoard)

        return  filteredBoard 
      },
      onError: (err) => {
        console.log('file: useQuery.ts:308 -> err:', err)
        
      },
      onSuccess: (data, variables, context) => {
        console.log('item deleted!', data, variables, context)
        queryClient.invalidateQueries(['board', context!.id])
      },
    }
  )
}

This is the logic of the backend:

export async function DELETE(request: Request, response: Response) {
  const itemsId = await request.json()
  try {

    await prisma.item.deleteMany({
      where: {
        id: {
          in: itemsId,
        },
      },
    })

    return NextResponse.json({ status: 200 })
  } catch (err) {
    console.log('file: route.ts:55 -> err:', err)
  }
}

When queryClient.invalidateQueries(['board', context!.id]) is reached on onSuccess, the item is shown back / reappears on the UI, even though it is successfully deleted from the db.

on onMutate it is successfully undisplaying the deleted item only when reaching onSuccess it is reappearing.
*I am sure that the item is deleted from the database.
*the context is current and shown without the deleted item.
The thing is, I'm not sure how to even start debugging this case. I have a few more custom hooks that do the same exact logic, for example "useAddItem", and I don't have issues with the other ones.

Any help or guide will be appreciated. Thanks

[samhirtarif]

In case you are using v4 of tanstack query, you might be calling invalidateQueries incorrectly.
You would have to pass the key in queryKey as shown here.

[TkDodo]

this syntax is still valid in v4. we've just updated the docs to be v5 compatible.

[RoyBenAviv]

How can I validate that the invalidateQueries is called?

[TkDodo]

you have a log statement right before the line:
console.log('item deleted!', data, variables, context)

if you see that, the invalidateQueries is just in the next line, so it will be called.

also, look at the react-query-devtools (that I hope you're using). You should see that the matching queries go to a fetching state then.

[RoyBenAviv]

I indeed see the log over there.
On react-query-devtools I see it is on fetching before it is reaching "onSuccess". If I log the whole board, should it fire the log after the invalidation?

Btw, If I delete the await queryClient.invalidateQueries(['board', context!.id]) the item is not reappearing, until the next action (for example adding an item)

[TkDodo]

start by double checking the network request (browser devtools, network tab) that is fired by the invalidation. I guess this request returns the whole list, so if your item is in that list it's a backend issue.

[RoyBenAviv]

start by double checking the network request (browser devtools, network tab) that is fired by the invalidation. I guess this request returns the whole list, so if your item is in that list it's a backend issue.

Hi, thank you for your answer.
I am sure that the response from the server is currect and I get the data back without the deleted item.
I am not sure your meaning by "that is fired by the invalidation". The only thing I see in the network tab is the response from the server that made by the axios call here:
return useMutation( (itemsId: (string | undefined)[]) => { return axios.delete(${BASE_URL}/api/items, { data: itemsId }) },

Anything that I might missing?

[TkDodo]

but as always: if you just show code snippets, we are likely to go back and forth... the best thing you can do is try to recreate your situation in a codesandbox reproduction. Likely, you'll find out that things work just fine there. Then, you can compare differences with your app and will likely find the culprit somewhere in there...

[RoyBenAviv]

You right I apologize, I copied the old version of the code
return NextResponse.json(board)

I am sending back the board not the status.

Regarding queryClient.invalidateQueries, how can I validate that it is refetching the query? because as I said I saw only the call from the DELETE method from my network tab

[TkDodo]

look at the react-query-devtools, see if a query is going into fetching state. if not, then likely the key is not matching. Have you tried just calling queryClient.invalidateQueries(['board']) without the exact id to match more broadly ?

but sorry, this is as much time as I'm willing to invest in here. It's a half-complete code-snippet and it's just confusing to go back and forth like this. Show a running reproduction of your problem please.

[RoyBenAviv]

Thanks for your help, I appriciate that.
Can you maybe assist privately? (willing to pay)

[RoyBenAviv]

This is the repository of my application:
https://github.com/RoyBenAviv/lundi.com