Mutation called returns false，但对象是在数据库中创建的

Question

我在 ReactJS 中构建了一个模式并在提交按钮上添加了 handleClick。

    const handleSubmit = async (event) => {
    event.preventDefault();
    const res = await createApp({variables: {id, name, url}});
    console.log('response' + res)
    console.log('loading' + loading);
    console.log('called' + called);
    console.log('error' + error)
    console.log('data' + data)
  }

第一次点击，我得到

 response[object Object]
 loadingfalse
 calledfalse
 errorundefined
 dataundefined

在第二次点击时，我得到了

response[object Object]
loadingfalse
calledtrue
errorundefined
data[object Object]

但是，第一次单击时会在数据库中创建正确的对象！

Answer 1

从你的问题中不清楚你是如何获得 loading、error、called 和 data 变量的，但我假设它来自useMutation勾。但是，如果您使用的是 Mutation 组件，则以下说明仍然适用。

useMutation 挂钩 returns 一个带有函数和 MutationResult 对象的数组，其中包括 loading、error、[=13 等属性=] 和 data。这些属性的公开是为了方便您轻松更新组件的 UI，但是，它们只是常规的 component state. As such, any changes to them are asynchronous, just like with setState.

换句话说，您可以调用并等待 createApp，作为这样做的结果，上述属性将最终更新。但是，不能保证他们会在 createApp 返回的 Promise 解决之前更新。因此，即使您正在等待对 createApp 的调用，这些属性中的每一个的值都尚未更新。如果不是将它们记录在点击处理程序中，而是在您的组件中呈现它们，您会认为它们发生了适当的变化。

如果您需要在点击处理程序中访问您的操作返回的数据，您可以从已解析的 Promise 的值中执行此操作：

const { data, error } = await createApp({variables: {id, name, url}});

// Note: loading and called are not exposed similarly because that would be moot --
// if the promise has resolved, the function was called and you're no longer loading

Mutation called returns false，但对象是在数据库中创建的

Mutation called returns false, but the object is created in DB

mutation

apollo

reactjs

graphql