如何在 GraphQL 中进行异步查询？

Question

我正在调用 1 个查询和突变。 突变工作正常，但是当我从查询中获得响应时，我需要将用户重定向到另一个页面，但在我的情况下，function 在我得到响应之前被触发。 我怎样才能防止这种情况？

          const renderData = async () => {
            const currentUserId = await data?.signInUserSession?.idToken
              ?.payload?.sub;
            const isAdmin = await data?.signInUserSession?.idToken?.payload[
              "custom:role"
            ];
            localStorage.setItem("userId", currentUserId);

            if (
              currentUserId !== null &&
              currentUserId !== undefined &&
              currentUserId !== ""
            ) {
              Auth.currentSession().then((data) => {
                setData({
                  variables: {
                    updateUserInput: {
                      id: currentUserId,
                      firstName: data.getIdToken().payload.given_name,
                      lastName: data.getIdToken().payload.family_name,
                    },
                  },
                });
              });
              isCodeValid({
                variables: {
                  validateUserVerificationCodeInput: {
                    user: {
                      id: currentUserId,
                    },
                  },
                },
              });


              if (isAdmin === "admin" && isUserCodeValid) {
                history.push("/managements");
              } else if (
                isUserCodeValid !== undefined &&
                isUserCodeValid === true
              ) {
                history.push("/verification");
              } else if (isUserCodeValid) {
                history.push("/stripe");
              }
            }
          };

isUserCodeValid - is a response from query

Answer 1

对于这种情况，useMutation 具有 onCompleted 和 refetchQueries 选项。 很难为您的案例编写一个确切的解决方案，因为并非所有代码都是可见的，但我相信下面的示例可以提供帮助：

const [addProduct, { data, loading, error }] = useMutation(
    createProductMutation
  );

 const onFinish = async (fieldNames) => {  
  
    await addSpending({
      variables: { ...others, ...fieldNames},
      refetchQueries: [{ query: calledQuery }],
      onCompleted: (data) => {
         // your logic 
      },
    });
    if (!error) {
      form.resetFields();
      onFinishSave(true);
    }
  };