Why my React Query does not instant update UI after delete? - reactjs

Question

The deleted Todo item is still on display after clicking the delete button.
It does not immediately remove on display, but on my db.json file it shows that it has been deleted.
I also test by placing the component inside App.jsx and there was no problem everything works fine but when I nested the component the delete function works yet it does not immediately update
I'm using
json-server,
react vite,
react query
import React from "react";
import { useQuery, useMutation, QueryClient } from "#tanstack/react-query";
import axios from "axios";
export const axiosClient = axios.create({
baseURL: "http://localhost:8500",
});
const queryClient = new QueryClient();
const SingleTask = ({ listId }) => {
const { data: taskTodo } = useQuery(
["tasks", listId],
async () => (await axiosClient.get(`/tasks/${listId}/subtasks`)).data,
{
initialData: [],
}
);
const deleteTask = useMutation(
({id}) => axiosClient.delete(`/subtasks/${id}`),
{
onSettled: () => queryClient.invalidateQueries(["tasks"])
}
);
return (
<>
{taskTodo
?.filter((entry) => entry.status != true)
.map((list) => (
<React.Fragment key={list.id}>
<div className="mt-6">
<div className="flex justify-between items-center text-sm">
<div className="flex gap-2">
<p>{list.title}</p>
</div>
<div className="flex gap-4">
<button onClick={() => {
deleteTask.mutate(list);
}}>
Delete
</button>
</div>
</div>
</div>
</React.Fragment>
))}
</>
);
};
export default SingleTask;
Here is the json data of tasks and subtask
json data
{
"tasks": [
{
"id": 1,
"status": false,
"title": "List One",
"details": ""
},
{
"id": 2,
"status": false,
"title": "List Two",
"details": ""
}
],
"subtasks": [
{
"id": 1,
"taskId": 1,
"status": false,
"title": "Subtask for list one",
"details": ""
},
{
"id": 2,
"taskId": 2,
"status": true,
"title": "Subtask for list two",
"details": ""
}
]
}

Answer 1

That's because you're invalidating your query. After the query gets invalidated, it will do a refetch of your active query (that is ["tasks", listId], unless you specify otherwise). So you have to wait for the refetch to complete in order to see the update, thus it is not immediate.
If you want it to be "immediate" and if you know what the state will look like, you can use optimistic updates for that.
In your case it could be something like this:
const queryClient = useQueryClient()
useMutation(({id}) => axiosClient.delete(`/subtasks/${id}`), {
// When mutate is called:
onMutate: async ({id}) => {
// Cancel any outgoing refetches (so they don't overwrite our optimistic update)
await queryClient.cancelQueries(['tasks', id])
// Snapshot the previous value
const previousTasks = queryClient.getQueryData(['tasks', id])
// Optimistically update to the new value
queryClient.setQueryData(['tasks', id], old => old.filter((t) => t.id !== id))
// Return a context object with the snapshotted value
return { previousTasks }
},
// If the mutation fails, use the context returned from onMutate to roll back
onError: (err, { id }, context) => {
queryClient.setQueryData(['tasks', id], context.previousTasks)
},
// Always refetch after error or success:
onSettled: (newData, error, { id }) => {
queryClient.invalidateQueries(['tasks', id])
},
})
UPDATE
Since your query keys are dependant on list.listIds and not list.ids (like I assumed), you would need to update your useMutation function to something like this:
const queryClient = useQueryClient();
useMutation(({ id }) => axiosClient.delete(`/subtasks/${id}`), {
onMutate: async ({ listId, id }) => {
await queryClient.cancelQueries(['tasks', listId]);
const previousTasks = queryClient.getQueryData(['tasks', listId]);
queryClient.setQueryData(['tasks', listId], (old) => old.filter((t) => t.id !== id));
return { previousTasks };
},
onError: (err, { listId }, context) => {
queryClient.setQueryData(['tasks', listId], context.previousTasks);
},
onSettled: (newData, error, { listId }) => {
queryClient.invalidateQueries(['tasks', listId]);
},
});