сбросить значения перед запуском следующей мутации

Question

Я выполняю запрос graphql внутри getFriendId(), который возвращает идентификатор, за которым следует мутация (внутри addFriend(), которая использует идентификатор, а также ввод (электронная почта), который вводит пользователь. Проблема в том, что с первой попытки мутация работает нормально и с правильными значениями. Однако, когда я меняю адрес электронной почты на входе и снова запускаю запрос / мутацию, используются значения из моей предыдущей попытки.

Для Например, во второй попытке мутация все еще использует идентификатор, который мы получили в первой попытке. Поэтому, в основном, значения с 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

Оба (мутация и отложенный запрос) имеют возможность определить функцию onCompleted (внутри объекта параметров) для обработки ответов / результатов.

if(data) не ожидает результатов - data от компонента scope, будет определен после первого 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);
    }
  });