从阿波罗缓存中获取最新数据|反应

Question

我在我的React项目中使用Apollo Client和Semantic-UI。现在，我正在使用Apollo的缓存。

我正在使用Semantic-UI https://react.semantic-ui.com/modules/tab中的Tab组件。

我已经制作了一个函数，该函数可以通过我的阿波罗配置中的一个突变和一个解析器来增加Tab.Pane组件可以拥有的Tab数量。这些只是客户端，意味着仅缓存。

静音：

mutation addPosCart($newOrderWindowID: Int) {
    addPosCart(newOrderWindowID: $newOrderWindowID) @client
}

解析器：

addPosCart: (_, __, {cache}) => {
    const query = GET_POS_CARTS;
    const previous = cache.readQuery({query});

    // Checks all previous orderWindowIds for the highest and later increments it
    const orderWindowId = Math.max(...previous.posCart.orderWindows.map(o =>  o.orderWindowId)) + 1; 

    const emptyOrderWindow = { orderWindowId, cartProducts: [] }
    const data = {
        posCart: {
            __typename: "PosCart",
            orderWindows: previous.posCart.orderWindows.concat([emptyOrderWindow])
        }
    }

    cache.writeQuery({query, data})
    return null;
}

我正在使用addPosCart组件从组件调用Mutation，如下所示：

<Mutation mutation={ADD_POS_CART}>
    {addPosCart => {
        return (
            <Button
                onClick={this.onClick(addPosCart)}
            >
                Lägg till nota
            </Button>
        );
    }}
</Mutation>

哪个触发了我的onClick函数：

onClick = addPosCart => () => {

    // Want to get the last element in the array
    const newCart = this.props.getPosCart.posCart.orderWindows[
        this.props.getPosCart.posCart.orderWindows.length - 1
    ];

    this.setState({
        selectedOrderWindowId: newCart.orderWindowId
    });

    addPosCart();
};

问题

问题是我没有从缓存中获取最新数据，这意味着当我使用解析器创建新的Tab.Pane时，不会使用最新元素来设置状态。

当我在console.log(this.props.getPosCart.posCart)中render时，我可以先看到旧数组，然后在它后面看到新数组：

因此，我在setState中的onClick将永远落后。我想知道是否有解决的办法。也许要等到新阵列加载完毕后才能使用。

谢谢！