正确使用 onCompleted 进行 GraphQL 突变

Question

我想先运行查询。查询 returns 一个 id，然后它是突变所必需的。目前，handleSubmit() 和运行的顺序存在问题。如果突变成功，控制台应该打印 console.log('Checking'); 但这并没有发生。我在控制台上得到的唯一输出是 What's the Id，该值可能是我之前尝试之一中存储的值。如果 id 是从这一轮特定的查询中派生的，我会在日志中看到 Working，但这也不会发生。

 const [loadUsers, { loading, data, error }] = useLazyQuery(LoadUsersQuery, {
    variables: {
      where: { email: friendEmail.toLocaleLowerCase() },
    },
    onCompleted: () => getFriendId(),
  });



  const [
    createUserRelationMutation,
    {
      data: addingFriendData,
      loading: addingFriendLoading,
      error: addingFriendError,
    },
  ] = useCreateUserRelationMutation({
    variables: {
      input: {
        relatedUserId: Number(id),
        type: RelationType.Friend,
        userId: 5,
      },
    },
    onCompleted: () => addFriend(),
  });

  const getFriendId = () => {
    console.log('Working');
    if (data) {
      console.log(data);
      if (data.users.nodes.length == 0) {
        console.log('No user');
        setErrorMessage('User Not Found');
      } else {
        console.log('ID', data.users.nodes[0].id);
        setId(data.users.nodes[0].id);
      }
    } else {
      if (error) {
        setErrorMessage(error.message);
      }
    }
  };

  const addFriend = () => {
    console.log('Whats the Id', Number(id));
    if (addingFriendData) {
      console.log('Checking');
      console.log(addingFriendData);
    }
    if (addingFriendError) {
      console.log('errorFriend', addingFriendError.message);
      setErrorMessage(addingFriendError.message);
    }
  };

 const handleSubmit = () => {
    loadUsers();
    createUserRelationMutation();
  };

在此之前，我正在尝试这样做：

const [id, setId] = useState('');
const [friendEmail, setFriendEmail] = useState('');

const [loadUsers, { loading, data, error }] = useLazyQuery(LoadUsersQuery);
const [createUserRelationMutation, { data: addingFriendData, loading: addingFriendLoading, error: addingFriendError }] = useCreateUserRelationMutation();

const getFriendId = () => {
    console.log('Email', friendEmail.toLocaleLowerCase());
    loadUsers({
      variables: {
        where: { email: friendEmail.toLocaleLowerCase() },
      },
    });
    if (data) {     
        console.log('ID', data.users.nodes[0].id);
        setId(data.users.nodes[0].id);      
    } 
    addFriend();
  };

  const addFriend = () => {
    console.log('Whats the Id', Number(id));
       createUserRelationMutation({
        variables: {
               input: {relatedUserId: Number(id), type: RelationType.Friend, userId: 7 }
            },
       });
       if (addingFriendData){
         console.log('Checking')
         console.log(data);
       }
       if(addingFriendError){
         console.log('errorFriend', addingFriendError.message);
         setErrorMessage(addingFriendError.message);
       }
  }


const handleSubmit = () =>
    {getFriendId();};

但是，在这种情况下，id 和其他状态的值没有及时更新。我在 getFriendId() 中运行进行了一个 graphql 查询，其中 returns 一个 id，然后是一个突变（在 addFriend() 中，它使用 id 以及一个输入（电子邮件）用户输入的问题。问题是在第一次尝试时，突变工作正常并且具有正确的值。但是，当我更改输入中的电子邮件地址并再次运行 query/mutation 时，正在使用我之前尝试的值。

在第二次尝试中，突变仍然使用我们在第一次尝试中获得的 id。

编辑：

onCompleted: (data) => getFriendId(data),

 const getFriendId = (data: any) => {
    console.log('Working');
    if (data) {
      console.log(data);
      if (data.users.nodes.length == 0) {
        console.log('No user');
        setErrorMessage('User Not Found');
      } else {
        console.log('ID', data.users.nodes[0].id);
        setId(data.users.nodes[0].id);
      }

更新代码：

 const [friendEmail, setFriendEmail] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const [loadUsers, { loading, data, error }] = useLazyQuery(LoadUsersQuery);

  const [
    createUserRelationMutation,
    {
      data: addingFriendData,
      loading: addingFriendLoading,
      error: addingFriendError,
    },
  ] = useCreateUserRelationMutation();


 const getFriendId = () => {
    console.log('Email', friendEmail.toLocaleLowerCase());
    loadUsers({
      variables: {
        where: { email: friendEmail.toLocaleLowerCase() },
      },
    });
    if (data) {
      if (data.users.nodes.length == 0) {
        console.log('No user');
        setErrorMessage('User Not Found');
      } else {
        console.log('ID', data.users.nodes[0].id);
        setId(data.users.nodes[0].id);
        addFriend(data.users.nodes[0].id); 

      }
    } else {
      console.log('No data');
      if (error) {
        setErrorMessage(error.message);
      }
    }
    //addFriend();
  };

  const addFriend = (idd: any) => {
    console.log('Whats the Id', Number(idd));
       createUserRelationMutation({
        variables: {
               input: {relatedUserId: Number(idd), type: RelationType.Friend, userId: 9 }
            },
       });
       if (addingFriendData){
         console.log('Checking')
         console.log(data);
       }
       if(addingFriendError){
         console.log('errorFriend', addingFriendError.message);
         setErrorMessage(addingFriendError.message);
       }
  }

    const handleSubmit = () =>
    {
    getFriendId();
    };

Answer 1

您不需要状态来存储 ID，而是将 Id 传递给 addFriend 方法，如下所示

    const [friendEmail, setFriendEmail] = useState('');
    const [errorMessage, setErrorMessage] = useState('');

    const _onLoadUserError = React.useCallback((error: ApolloError) => {
        setErrorMessage(error.message);
    }, []);

    const [
        createUserRelationMutation,
        {
            data: addingFriendData,
            loading: addingFriendLoading,
            error: addingFriendError,
            called: isMutationCalled
        },
    ] = useCreateUserRelationMutation();

    const addFriend = React.useCallback((idd: Number) => {
        console.log('Whats the Id', idd);
        createUserRelationMutation({
            variables: {
                input: { relatedUserId: idd, type: RelationType.Friend, userId: 9 }
            }
        });
    }, [createUserRelationMutation]);

    const getFriendId = React.useCallback((data: any) => {
        console.log('Email', friendEmail.toLocaleLowerCase());
        if (data) {
            if (data.users.nodes.length == 0) {
                console.log('No user');
                setErrorMessage('User Not Found');
            } else {
                console.log('ID', data.users.nodes[0].id);
                addFriend(Number(data.users.nodes[0].id));

            }
        }
    }, [friendEmail, addFriend]);

    const [loadUsers] = useLazyQuery(LoadUsersQuery, {
        onCompleted: getFriendId,
        onError: _onLoadUserError
    });

    const handleSubmit = React.useCallback(() => {
        loadUsers({
            variables: {
                where: { email: friendEmail.toLocaleLowerCase() },
            }
        });
    }, [loadUsers, friendEmail]);

    if (!addingFriendLoading && isMutationCalled) {
        if (addingFriendData) {
            console.log('Checking')
            console.log(data);
        }
        if (addingFriendError) {
            console.log('errorFriend', addingFriendError.message);
            setErrorMessage(addingFriendError.message);
        }
    }

Update

我已经更新了上面的代码，请参考。我假设 useCreateUserRelationMutation 不接受选项作为参数，如果它接受选项那么你可以使用 onCompleted 和 onError 就像 loadUsers query.

正确使用 onCompleted 进行 GraphQL 突变

proper use of onCompleted for GraphQL mutations

javascript

typescript

apollo

reactjs

graphql