使用 react-apollo (GraphQL) 进行插入突变，如何获取插入的 id 以进行本地商店更新？答案

【问题标题】：Using react-apollo (GraphQL) to do an insert mutation, how do I get the inserted id for the local store update?使用 react-apollo (GraphQL) 进行插入突变，如何获取插入的 id 以进行本地商店更新？
【发布时间】：2018-04-08 09:37:17
【问题描述】：

我有以下提交处理程序的表单，然后使用 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 响应中返回，但这似乎不及时。

除非我也可以从该承诺处理程序访问store，否则我看不出这是怎么可能的。但它似乎是一个如此常见的用例，必须有一种方法，对吧？我错过了什么明显的东西吗？

【问题讨论】：

标签： javascript graphql react-apollo

【解决方案1】：

update方法提供更新后的对象作为第二个参数

update: (store, { ... access userId here ... }) => { ... }

来自docs：

这个函数将在突变的生命周期内被调用两次。如果提供了optimisticResponse，则在最开始时一次。从乐观数据创建的写入将在第二次调用此函数之前回滚，即突变成功解决的时间。 此时将使用实际的变异结果调用更新，并且不会回滚这些写入。

【讨论】：