Как обычно реализуется бесконечный список (infinite scroll) в Apollo GraphQL?

Бесконечная прокрутка в Apollo GraphQL строится на двух механизмах: методе fetchMore для догрузки следующей страницы и настройке кэша, чтобы новые данные добавлялись к уже загруженным, а не заменяли их. По умолчанию Apollo перезаписывает поле в кэше, поэтому без специальной политики список будет «сбрасываться» на первую страницу.

Cursor-based пагинация

Чаще всего сервер отдаёт connection-структуру (Relay-style) с курсором и флагом наличия следующей страницы:

query GetItems($cursor: String) {
  items(first: 20, after: $cursor) {
    edges { node { id title } }
    pageInfo { endCursor hasNextPage }
  }
}

Настройка merge в кэше

В InMemoryCache описываем политику для поля items, объединяя edges старых и новых данных:

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        items: {
          keyArgs: false,
          merge(existing = { edges: [] }, incoming) {
            return {
              ...incoming,
              edges: [...existing.edges, ...incoming.edges],
            };
          },
        },
      },
    },
  },
});

Вызов fetchMore при скролле

В компоненте подписываемся на событие скролла (или используем IntersectionObserver) и вызываем fetchMore, передавая текущий endCursor:

const { data, fetchMore, loading } = useQuery(GET_ITEMS);

const loadMore = () => {
  if (!data.items.pageInfo.hasNextPage || loading) return;
  fetchMore({
    variables: { cursor: data.items.pageInfo.endCursor },
  });
};

Благодаря merge-политике новые edges дописываются в конец, и UI автоматически обновляется реактивно.

Итог: применяйте этот подход для лент, чатов и каталогов, где важна плавная догрузка данных без потери уже загруженных элементов и без ручного управления состоянием списка.