правильное использование onCompleted для мутаций GraphQL - PullRequest
Новая
       13

правильное использование onCompleted для мутаций GraphQL

0 голосов
/ 30 апреля 2020

Я хочу запустить запрос первым. Запрос возвращает идентификатор, который затем требуется для мутации. В настоящее время существует проблема с порядком того, как обе вещи запускаются с handleSubmit(). Если мутация прошла успешно, консоль должна вывести console.log('Checking');, но этого не происходит. Единственный вывод, который я получаю на консоли, - What's the 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 и других состояний не обновлялись своевременно. Я выполнял запрос graphql внутри getFriendId(), который возвращает идентификатор, за которым следовала мутация (внутри addFriend(), которая использует идентификатор вместе с вводом (электронная почта), который вводит пользователь. Проблема в том, что на первом Если попытаться, мутация работает нормально и с правильными значениями. Однако, когда я изменяю адрес электронной почты на входе и снова запускаю запрос / мутацию, используются значения из моей предыдущей попытки.

Во второй попытке мутация все еще использовала идентификатор, который мы получили в первой попытке.

Редактировать: 

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

1 Ответ

1 голос
/ 02 мая 2020

Вам не нужно состояние для хранения идентификатора, вместо этого передайте идентификатор для метода 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);
        }
    }

Обновление

Я обновил приведенный выше код, пожалуйста, обратитесь к нему. Я предполагаю, что useCreateUserRelationMutation не принимает параметры в качестве аргумента, если он принимает параметры, вы можете использовать onCompleted и onError, как loadUsers query.

...