阿波罗、乐观创造和重定向答案

【问题标题】：Apollo, optimistic creation, and redirection阿波罗、乐观创造和重定向
【发布时间】：2020-09-07 06:50:06
【问题描述】：

我的 GraphQL 乐观渲染遇到了一些问题。我用的是Apollo Client，比如：

const history = useHistory();
const [addItem] = useMutation(ADD_ITEM_QUERY);

const onClick = () => {
    addItem({
        variables: {
            id: '16b1119a-9d96-4bc8-96a3-12df349a0c4d',
            name: 'Foo Bar'
        },
        optimisticResponse: {
            addItem {
                id: '16b1119a-9d96-4bc8-96a3-12df349a0c4d',
                name: 'Foo Bar',
                __typename: 'Item'
            }
        },
        update: () => {
            // Update item cached queries

            history.push(`/items);
        }
    });
};

问题来自重定向。据我了解，update 函数被调用了两次：第一次使用optimisticResponse，第二次使用网络响应（通常应该相同）。

但是，让我们考虑以下场景：

我创建了一个新项目，
我收到了乐观的响应，我被重定向到项目列表，
我单击“添加项目”以重定向到表单
我收到服务器响应，因此我再次被重定向到列表。

防止这种双重重定向的正确方法是什么？

我想检查当前的缓存值。如果该值已经是最新的，我不会应用重定向。不知道有没有更好的方法？你如何处理这样的场景？

【问题讨论】：

标签： graphql apollo-client optimistic-ui

【解决方案1】：

您应该在更新函数之外调用 history.push。你可以这样做

addItem({...}).then(() => history.push('/items')).

【讨论】：