При повторной выборке с помощью Apollo обновляются все экземпляры этого запроса, даже с разными параметрами

У меня есть 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>!

Почему это происходит?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
44
1

Ответы 1

Если ваши запросы имеют одно и то же имя, кеш Apollo не будет знать, что возвращаемые данные отличаются, поэтому он обновит оба компонента.

Если изменение этого параметра не помогает, опубликуйте код запроса для каждого запроса.

Другие вопросы по теме