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

Posted 2023-03-08

【中文标题】阿波罗、乐观创造和重定向

【英文标题】：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，第二次使用网络响应（通常应该相同）。

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

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

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

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

【参考方案1】：

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

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