Question

我有2个看起来像这样的查询：

const Basket = ({children}) => <Query
    query={MY_QUERY}
    variables={{ list: 'BASKET' }}>
    {children}
</Query>

const Bin = ({children}) => <Query
    query={MY_QUERY}
    variables={{ list: 'BIN' }}>
    {children}
</Query>

现在，我像这样使用它们：

<Basket>
    {({ data, loading, error, refetch }) => {
        return loading ? (
            <div>Loading</div>
        ) : error ? (
            <div>Error</div>
        ) : (
            <div>
                <MyTable data={data} />
                <button onClick={() => refetch()}>refetch</button>
            </div>
        );
    }}
</Basket>

<Bin>
    {({ data, loading, error, refetch }) => {
        return loading ? (
            <div>Loading</div>
        ) : error ? (
            <div>Error</div>
        ) : (
            <div>
                <MyTable data={data} />
                <button onClick={() => refetch()}>refetch</button>
            </div>
        );
    }}
</Bin>

现在这是问题所在：

如果我按下按钮以重新获取购物篮的内容，则该数据不仅会出现在<Basket>中，还会出现在<Bin>中！

为什么会这样？

Answer 1

如果您的查询具有相同的名称，则Apollo缓存将不知道返回的数据是不同的-因此它将更新两个组件。

如果更改此设置无济于事，请针对每个查询发布查询代码

使用Apollo进行重新刷新会更新该查询的所有实例，即使使用不同的参数也是如此

1 个答案: