React Apollo Hooks - 链突变

Question

我有两个突变：

const [createRecord, {data}] = useMutation(createRecordQuery);其中returns新建记录的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

我不确定是否有推迟执行的方法（以及我们不能暂停 <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);

Answer 2

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

来自源代码：

If you're interested in performing some action after a mutation has completed, and you don't need to update the store, use the Promise returned from client.mutate

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

React Apollo Hooks - 链突变

React Apollo Hooks - Chain mutations

javascript

reactjs

apollo

react-apollo

react-apollo-hooks