У меня есть 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>
!
Почему это происходит?
Если ваши запросы имеют одно и то же имя, кеш Apollo не будет знать, что возвращаемые данные отличаются, поэтому он обновит оба компонента.
Если изменение этого параметра не помогает, опубликуйте код запроса для каждого запроса.