`data` не определено в apollo useMutation Promise

Question

Почему data undefined в Promise, даже если он отображается в HTML ниже?

Я не хочу использовать .then((data) =>

const LoginPage: React.SFC<{}> = () => {
    const [login, { loading, data, error }] = useMutation<Q, V>(MUTATION)

    const onSubmit = event => {
        event.preventDefault()
        login({
            variables: {
                email,
                password
            }
        }).then(() => {
            console.log(data)         // <-- undefined
        }).catch(() => {
            console.log(error)        // <-- OK
        })
    }

    return <div>
        <form onSubmit={onSubmit}> ... </form>

        {data && <pre>{JSON.stringify(data)}</pre>}          //  <-- OK
    </div>
}

Answer 1

Вариант исходного вопроса. Не уверен, работает ли он так, как задумано, потому что результат обещания мутации не определен. Спасибо.

        const [login] = useMutation(MUTATION);

        const onSubmit = event => {
            event.preventDefault()
            login({
                variables: {
                    email,
                    password
                }
            }).then((result) => {
                console.log(result)       // <-- undefined
            }).catch(() => {
                console.log(error)        // <-- OK
            })
        }

Answer 2

Это работает как задумано. Обновление состояния, вызванное вызовом функции обновления состояния, возвращаемойuseStateхук асинхронный.useState используется под капотом useMutation для управления различными битами состояния, возвращаемыми хуком (data, loading, errorи т. д.), поэтому это состояние также будет обновляться асинхронно. Это означает, что обещание, возвращенноеloginможет разрешиться, и при этом соответствующее состояние будет обновлено, но не сразу. После обновления компонент повторно отрисовывается, и вы видите обновленное значение, отображаемое в вашем компоненте.

Если вам нужно каким-либо образом использовать данные, возвращенные мутацией, как только обещание разрешится, вам нужно сделать это, извлекая их из разрешенного значения обещания, вместо того, чтобы полагаться на состояние компонента.