1

我有两个突变：

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

但我真的不知道我应该如何处理第一个突变的loadinganddata并等待它运行第二个突变。

谢谢！

4

2 回答 2

3

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

从源代码：

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

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

于 2019-09-09T16:17:38.363 回答
0

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

另一种解决方法是使用withApolloHOC：

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);
于 2019-09-09T15:39:33.590 回答