`data` 在 apollo useMutation Promise 中未定义

Posted 2023-03-10

【中文标题】`data` 在 apollo useMutation Promise 中未定义

【英文标题】：`data` is undefined in apollo useMutation Promise

【发布时间】：2020-01-16 07:43:11

【问题描述】：

为什么data在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>

【参考方案1】：

原始问题的变体。不确定它是否按预期工作，因为突变的 Promise 的结果是未定义的。谢谢。

        const [login] = useMutation(MUTATION);

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

【参考方案2】：

这是按预期工作的。调用由useState 钩子is asynchronous 返回的状态更新器函数引起的状态更新。 useState 在后台被useMutation 用来管理钩子返回的各种状态位（data、loading、error 等），所以这个状态也会异步更新。这意味着 login 返回的 Promise 可以解析，并且在这样做时，适当的状态将被更新，而不是立即更新。更新后，组件会重新渲染，您会在组件中看到更新后的值。

如果您需要在 Promise 解析后以某种方式使用突变返回的数据，那么您需要通过从 Promise 的解析值中提取它来实现，而不是依赖于组件状态。