T
TanStack•16mo ago
other-emerald

Help needed with Tanstack Query for Vue

I'm trying to make a demo of a simple app with optimistic update but I can't make the mutation showing as pending in another component from where the mutation was triggered. For example I have users list and add users page when I trigger the mutation inside the Add User component and try to listen to the same mutation inside UsersList the mutation shows as idle even though it's mutating in the background. I wrapped the pending state inside a computed property, I'm using Vue3 Composition API with Tanstack Query version: 5.27.5
2 Replies
other-emerald
other-emeraldOP•16mo ago
const { mutateAsync, isPending } = addUserMutation();

const onSubmit = handleSubmit(async (values) => {
  try {
    queryClient.setQueryData(["users"], (old: User[]) => {
      const users = [
        ...old,
        {
          ...values,
          id: "1",
          firstName: "",
          lastName: "",
          lastSignInAt: null,
          emailAddresses: [{ emailAddress: values.email }],
        },
      ];

      return users;
    });

    mutateAsync(values, {
      onSuccess: () => {
        console.log("success");
      },
      onSettled: () => {
        console.log("settled");
      },
    });

    router.push("/users");
  } catch (error) {
    console.log(error);
  }
});
const { mutateAsync, isPending } = addUserMutation();

const onSubmit = handleSubmit(async (values) => {
  try {
    queryClient.setQueryData(["users"], (old: User[]) => {
      const users = [
        ...old,
        {
          ...values,
          id: "1",
          firstName: "",
          lastName: "",
          lastSignInAt: null,
          emailAddresses: [{ emailAddress: values.email }],
        },
      ];

      return users;
    });

    mutateAsync(values, {
      onSuccess: () => {
        console.log("success");
      },
      onSettled: () => {
        console.log("settled");
      },
    });

    router.push("/users");
  } catch (error) {
    console.log(error);
  }
});
const mutation = addUserMutation();

const isPending = computed(() => {
  return mutation.isPending;
});
const mutation = addUserMutation();

const isPending = computed(() => {
  return mutation.isPending;
});
genetic-orange
genetic-orange•16mo ago
#vue-query-questions

Did you find this page helpful?