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

Question

我的 GraphQL 乐观渲染遇到了一些麻烦。我正在使用 Apollo 客户端，例如：

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. 我创建了一个新项目，
2. 我收到了乐观的回应，我被重定向到项目列表，
3. 我单击“添加项目”以重定向到表单
4. 我收到服务器响应，因此我再次被重定向到列表。

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

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

Answer 1

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

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