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

Posted 2023-03-08

【中文标题】在运行下一个突变之前重置值

【英文标题】：reset values before running next mutation

【发布时间】：2020-08-13 17:48:12

【问题描述】：

我在 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('[e-mail]');
  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>
  );
;

【问题讨论】：

useCreateUserRelationMutation 来自哪里。是不是自定义钩子。如果有，请给我看一下

【参考方案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);
    
  );

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。