Javascript 阿波罗钩子链突变

我有两个突变：

• const[createRecord，{data}]=useCommutation（createRecordQuery）

• const[saveValue，{data:dataSave}]=useCommutation（saveValueQuery）将一些值保存在记录上

我的

saveValue

需要一个记录ID。如果我在一个新记录上打开我的表单，我还没有这个ID，所以在提交时，我需要先调用

createRecord

来检索ID，然后调用

saveValue

来保存我记录上的值

这种简单的方法不起作用：

const onSave=异步值=>{
如果（！recordId）{
//调用createRecord检索recordId（此处代码简化）
const recordId=wait createRecord（）；
}
//保存我的价值观
返回saveValue（{变量：{recordId，values}）；
}

但是我真的不知道我应该如何处理第一个变异的

加载

和

数据

，然后等待它运行第二个变异

---

谢谢！

我不确定是否有办法推迟执行（以及我们不能暂停执行）。那么将第二部分移动到单独的

useffect

中如何

const [recordId, setRecordId] = useState(null);
const [values, setValues] = useState({});
const onSave = async _values => {
    if (!recordId) {
         // Call createRecord to retrieve recordId (code is simplified here) 
         setRecordId(await createRecord());
    }
    setValues(_values);
}
useEffect(() => {
  saveValue({variables: {recordId, values});
}, [recordId, _values]);

另一个解决方法是利用阿波罗的

HOC：

function YourComponent({ client: { mutate } }) {
 onSave = async values => {
   let recordId;
   if (!recordId) {
     recordId = await mutate(createRecordQuery);
   }
   await mutate(saveValueQuery, values);
   // do something to let user know saving is done
 };

export withApollo(YourComponent);

---

mutate函数返回解析为突变响应数据的承诺，因此您应该能够简单地使用它来实现您想要的

从源代码：

如果你有兴趣在突变发生后做一些动作 完成后，您无需更新商店，请使用承诺 从client.mutate返回

---

我不确定为什么这在您的初始测试中不起作用，但我在本地尝试了它，它按预期工作。您应该基本上能够完成您在问题中所写的操作。

不幸的是，这并不像看上去那么简单。对于

saveValue

变异，我需要recordId和提交的值。我发现的唯一方法是o将其传递到

onCompleted

函数中，以使用钩子状态

const[valuesToSave，setValuesToSave]=useState（[]）；

并使用这是一个执行我的

saveValue

mutation的函数在这种情况下，您可以使用与变量一起传入的更新选项。它的真正目的是允许您更新apollo存储（例如，将您的mutation中的数据添加到其他查询中，以避免重新提取），但它也应该适用于此。与onCompleted一样，它将提供来自您的突变的数据作为参数。我已更新了我的答案，以包含详细信息。我接受您的答案，对于

更新

部分。这有点粗糙，因为我们利用了一些并非为此目的而设计的东西，但它可以完成工作。嗯，有一个简单的实际上，我只是仔细检查了源代码，看到了这样一条评论：“如果您有兴趣在突变完成后执行某些操作，并且不需要更新存储，请使用

客户端返回的承诺。mutate

”。然后我使用awa进行了测试它在变异函数上运行，并成功地获得了结果数据。你在哪里尝试这种方法失败了？你完全正确，它在变异函数上使用了一个简单的

wait

…我想我一开始就尝试过了，我可能错过了一些东西。谢谢！