在运行下一个突变之前重置值

Question

我在 getFriendId() 中运行一个 graphql 查询，它返回一个 id，然后是一个突变（在 addFriend() 中，它使用 id 以及用户输入的输入（电子邮件）。问题是在第一次尝试时，突变工作正常并且具有正确的值。但是，当我更改输入中的电子邮件地址并再次运行查询/突变时，正在使用我之前尝试的值。

例如，在第二次尝试中，突变仍然使用我们在第一次尝试中获得的 id。所以基本上，setId 和 setEmail 的值没有及时更新。我该如何解决这个问题？

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();};

返回看起来像这样：

<Input
                  placeholder="Email"
                   onChangeText={(text) => setFriendEmail(text)}
                  value={friendEmail}
                />

<Button
                  rounded
                  onPress={() => handleSubmit()}>
                    Add Friend{' '}
                </Button>

我的代码的当前图片：

export const AddFriendEmailPage: React.FunctionComponent<AddFriendEmailPageProps> = ({
  toggleShowPage,
  showAddFriendEmailPage,
}) => {
  const [id, setId] = useState('');
  const [friendEmail, setFriendEmail] = useState('ana@hotmail.com');
  const [errorMessage, setErrorMessage] = useState('');

  const [loadUsers, { loading, data, error }] = useLazyQuery(LoadUsersQuery, {
    variables: {
      where: { email: friendEmail.toLocaleLowerCase() },
    },
    onCompleted: ( 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 {
          const friendId = data.users.nodes[0].id; 
          console.log('friendId', friendId);
          // setId(data.users.nodes[0].id);

          const relationParams = {
            input: {
              relatedUserId: Number( friendId ),
              type: RelationType.Friend,
              userId: 8, // current user?
            },
          }                             
          console.log("relation params", relationParams);

          // fire second query/mutation using received data
          createUserRelationMutation( { variables: relationParams } );

        }
      } else {
        if (error) {
          setErrorMessage(error.message);
        }
      }
    }
  });

  const [
    createUserRelationMutation,
    {
      data: addingFriendData,
      loading: addingFriendLoading,
      error: addingFriendError,
    },
  ] = useCreateUserRelationMutation( {
    variables: {
      input: {
        relatedUserId: Number(id),
        type: RelationType.Friend,
        userId: 8,
      },
    },
    onCompleted: ( addingFriendData: any) => {
      console.log("relation created", addingFriendData);
    }
  });

  return (
            <View style={scaledAddFriendEmailStyles.searchTopTextContainer}>
            </View>
            <View style={scaledAddFriendEmailStyles.searchFieldContainer}>
              <Item style={scaledAddFriendEmailStyles.searchField}>
                <Input
                  placeholder="Email"
                  //onChangeText={(text) => setFriendEmail(text)}
                  value={friendEmail}
                />
              </Item>
              <View style={scaledAddFriendEmailStyles.buttonContainer}>
                <Button
                  rounded
                  style={scaledAddFriendEmailStyles.button}
                  //onPress={() => handleSubmit()}
                  onPress={()=>loadUsers()}
                  >
                  <Text style={scaledAddFriendEmailStyles.text}>
                    Add Friend{' '}
                  </Text>
                </Button>
              </View>
  );
};

Answer 1

（mutation 和lazyquery）都可以定义onCompleted（内部选项对象）函数来处理响应/结果。

if(data) 不等待结果 - data 来自组件范围，将在第一次 useLazyQuery 触发后定义。

onCompleted 处理程序接收data 作为参数，它将是当前请求结果（与组件范围内的data 不同 - 稍后，在下一个渲染“流程”将是相同的）。

更新

 const [loadUsers, { loading, data, error }] = useLazyQuery(LoadUsersQuery, {
    variables: {
      where: { email: friendEmail.toLocaleLowerCase() },
    },
    onCompleted: ( data ) => {
      // getFriendId
      console.log('Working');
      if (data) {
        console.log(data);
        if (data.users.nodes.length == 0) {
          console.log('No user');
          setErrorMessage('User Not Found');
        } else {
          const friendId = data.users.nodes[0].id; 
          console.log('friendId', friendId);
          // needed?
          // setId(data.users.nodes[0].id);

          const relationParams = {
            input: {
              relatedUserId: Number( friendId ),
              type: RelationType.Friend,
              userId: 5, // current user?
            },
          }                             
          console.log("relation params", relationParams);

          // fire second query/mutation using received data
          createUserRelationMutation( { variables: relationParams } );

        }
      } else {
        if (error) {
          setErrorMessage(error.message);
        }
      }
    }
  });

  const [
    createUserRelationMutation,
    {
      data: addingFriendData,
      loading: addingFriendLoading,
      error: addingFriendError,
    },
  ] = useMutation(CreateUserRelationMutation, {
    variables: {
      input: {
        relatedUserId: Number(id),
        type: RelationType.Friend,
        userId: 5,
      },
    },
    onCompleted: ( data ) => {
      console.log("relation created", data);
    }
  });