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，因此您应该可以轻松实现所需的目标。

从源代码开始：

如果您有兴趣在突变后执行某些操作完成，并且您不需要更新商店，请使用Promise 从client.mutate返回

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

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

React Apollo Hooks-链突变

2 个答案: