T
TanStack•17mo ago
deep-jade

invalidateQueries or refetch is not working on delete and put request.

const { mutate: deleteSyllabus, isPending: isDeleting } = useMutation({
        mutationFn: async (variables: { id: string, name: string }) => handleDelete(variables.id, variables.name),
        onError: (error, variables, context: any) => {
            queryClient.setQueryData(['syllabus'], context.previousSyllabus)
        },
        onSuccess: async () => {
            await queryClient.invalidateQueries({ queryKey: ['syllabus'] })
            toast.success('Syllabus deleted successfully');
        },
    });
const { mutate: deleteSyllabus, isPending: isDeleting } = useMutation({
        mutationFn: async (variables: { id: string, name: string }) => handleDelete(variables.id, variables.name),
        onError: (error, variables, context: any) => {
            queryClient.setQueryData(['syllabus'], context.previousSyllabus)
        },
        onSuccess: async () => {
            await queryClient.invalidateQueries({ queryKey: ['syllabus'] })
            toast.success('Syllabus deleted successfully');
        },
    });
Delete functions work successfully and I get the toast. the same method works with post request but not with put and delete. I am using the same query key to invalidate onSuccess.
4 Replies
deep-jade
deep-jadeOP•17mo ago
@Gludek
fascinating-indigo
fascinating-indigo•16mo ago
The issue must be in your handleDelete function. If that promise resolves, then onSuccess will be triggered. With that knowledge, I think you should be able to do some more debugging and find the root cause.
deep-jade
deep-jadeOP•16mo ago
onSuccess is working like i get the toast message and delete function also works but Invalidate and refetch not wowrking 
    const { mutate: addSyllabus, } = useMutation({
        mutationFn: async (data: any) => {
            const response = await axios.post('/api/syllabus', data);
            return response.data;
        }, onError: (error, variables, context: any) => {
            queryClient.setQueryData(['syllabus'], context.previousSyllabus)
        }, onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['syllabus'] })
        }
    });
    const { mutate: addSyllabus, } = useMutation({
        mutationFn: async (data: any) => {
            const response = await axios.post('/api/syllabus', data);
            return response.data;
        }, onError: (error, variables, context: any) => {
            queryClient.setQueryData(['syllabus'], context.previousSyllabus)
        }, onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['syllabus'] })
        }
    });
and in this invalidate works
fascinating-indigo
fascinating-indigo•16mo ago
One obvious difference is that you use await in your first sample, but not in the working sample. I don't think it should make a difference, but try to change you non-working code step-by-step to be more similar to your working code, until you can figure out what is making the difference so it does not work.

Did you find this page helpful?