我的表单带有以下提交处理程序,然后使用react-apollo的mutate
方法发送GraphQL突变:
const doSubmit = (values, { setSubmitting, setErrors }) => {
//create a new obj: can't submit the extra stuff in values, GraphQL will yell at us!
const newUser = {
firstName: values.firstName,
lastName: values.lastName,
emailAddress: values.emailAddress,
isActive: values.isActive,
sharedAccount: values.sharedAccount,
userId: values.userId
};
mutate({
variables: { user: newUser },
update: store => {
//only update if adding a new user
if (values.userId !== 0) {
return;
}
let data = store.readQuery({ query: USER_LIST_QUERY });
data.users.push(newUser);
store.writeQuery({ query: USER_LIST_QUERY, data });
}
}).then(() => {
//let formik know that submit is complete
setSubmitting(false);
//todo: redirect to userlist
});
};
此方法基于this mutate-with-update example in the docs。
我知道
mutate
承诺处理程序将有权访问插入的ID,因为它将在graphql响应中返回,但这似乎不及时。除非我也可以从该Promise处理程序访问
store
,否则我不知道这怎么可能。但是似乎必须要有一种方法,对吧?我是否缺少明显的东西? 最佳答案
update方法提供了更新的对象作为第二个参数
update: (store, { ... access userId here ... }) => { ... }
从docs:
在突变的整个生命周期中,该函数将被调用两次。从一开始就提供了optimisticResponse。从乐观数据创建的写入将在第二次调用此函数之前回滚,这是突变成功解决的时间。届时将使用实际的突变结果调用更新,并且不会回退那些写入。