javascript - återställ värden innan nästa mutation körs

Jag kör en GraphQL-fråga inuti getFriendId() som returnerar ett id, följt av en mutation (inuti addFriend(), som använder id:t, tillsammans med en input (e-post) som användaren skriver in. Problemet är att vid första försöket fungerar mutationen bra och med korrekta värden. Men när jag ändrar e-postadressen i inputen och kör frågan/mutationen igen används värdena från mitt tidigare försök.

Till exempel, i det andra försöket använder mutationen fortfarande det id som vi fick i det första försöket. Så i princip uppdateras inte värdena med setId och setEmail i tid. Hur kan jag fixa detta?

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

Returen ser ut ungefär så här:

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

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

Nuvarande bild av min kod:

export const AddFriendEmailPage: React.FunctionComponent<AddFriendEmailPageProps> = ({
  toggleShowPage,
  showAddFriendEmailPage,
}) => {
  const [id, setId] = useState('');
  const [friendEmail, setFriendEmail] = useState('[email ');
  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>
  );
};

Svar #1

Både (mutation och lazyquery) har möjlighet att definiera onCompleted (inuti options-objektet) funktion för att hantera svar/resultat.

if(data) väntar inte på resultat - data kommer från komponentens scope, kommer att vara definierad efter första useLazyQuery-körningen.

onCompleted-hanteraren tar emot data som argument, det kommer att vara det aktuella begäransresultatet (olikt data i komponentens omfattning - senare, vid nästa renderisering kommer 'flow' att vara densamma).

uppdatera

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