T
TanStack•15h ago
xenial-black

How to optimistically update onSucess not onMutation?

I've been trying to optimistically update a list when a create / delete mutation is actually successful in order to not wait for the invalidation refetch or deal with rollbacks and weird jumps. I'd rather have a spinner for the mutation and then immediately show on success. I've tried this in multiple ways (trpc + RQ in new integration) and whatever order i put things in it seems that most of the time it does not work, only occasionally it does and that seems completely random. But most of the time it just does not update the list at all. 
// inside form component
const mutationOptions = trpc.services.create.mutationOptions({
        onSuccess: async (createdService) => {
            console.log("create service success", createdService);
            form.reset();
            queryClient.setQueryData<tSelectService[]>(trpc.services.list.queryKey(), (old) => [...(old ?? []), createdService]);
            await queryClient.invalidateQueries({ queryKey: trpc.services.list.queryKey() });
        },
    });

    const createMutation = useMutation(mutationOptions);

    function onSubmit(data: tCreateServiceFormData) {
        createMutation.mutate(data);
    }
// inside form component
const mutationOptions = trpc.services.create.mutationOptions({
        onSuccess: async (createdService) => {
            console.log("create service success", createdService);
            form.reset();
            queryClient.setQueryData<tSelectService[]>(trpc.services.list.queryKey(), (old) => [...(old ?? []), createdService]);
            await queryClient.invalidateQueries({ queryKey: trpc.services.list.queryKey() });
        },
    });

    const createMutation = useMutation(mutationOptions);

    function onSubmit(data: tCreateServiceFormData) {
        createMutation.mutate(data);
    }
The log shows up but no update of list. If i put invalidate before setQueryData or after it sometimes starts working sometimes not.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?