React Apollo Hooks-链突变

Question

我有两个突变：

• const [createRecord, {data}] = useMutation(createRecordQuery); 返回新创建记录的ID
• const [saveValue, {data: dataSave}] = useMutation(saveValueQuery); 将一些值保存在记录中

我的saveValue突变需要一个记录ID。 如果我在新记录上打开表单，则还没有此ID，因此在提交时，我需要先调用createRecord来检索ID，然后再saveValue将值保存到记录中。

这种简单的方法行不通：

const onSave = async values => {
    if (!recordId) {
         // Call createRecord to retrieve recordId (code is simplified here) 
         const recordId = await createRecord();
    }

    // Save my values
    return saveValue({variables: {recordId, values});
}

但是我真的不知道如何处理第一个突变的loading和data ，并等待它运行第二个突变。

谢谢！

Answer 1

mutate函数返回一个可解决突变响应数据的promise，因此您应该仅能够使用它来实现所需的功能。

从源代码：

如果您对完成变异后的操作感兴趣，而又不需要更新商店，请使用client.mutate返回的Promise。

我不确定为什么这在您的初始测试中不起作用，但是我在本地尝试过并且可以按预期工作。 从本质上讲，您应该能够完成问题中所写的内容。

Answer 2

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

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]);

另一个解决方法是利用withApollo 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);