Компонент отложенной загрузки, заполненный graphQL

Question

У меня есть компонент карточек, который я использую на своей индексной странице, который берет данные из запроса graphQL, например:

data.allStrapiArticle.nodes.map(article => {
            return (
              <Card
                id={article.id}
                title={article.title}
                category={article.categories}
                author={article.author.name}
                content={article.content}
                imgUrl={article.cover.publicURL}
                date={article.created_at}
                slug={article.slug}
              />
            )
          })

, однако это загрузит все карточки статей. Я хочу сначала загрузить только 3 карты, а когда пользователь прокручивает третью, он загружает еще 3, пока не достигнет максимума 12.

Как я могу это сделать? Я пробовал использовать наблюдатель пересечения с vanilla js, но это не сработало:

let numberToLoad = 3
   function loadCards() {
    numberToLoad += 3
    data.allStrapiArticle.nodes.slice(0, numberToLoad).map(article => {
      return (
        <Card
          id={article.id}
          title={article.title}
          category={article.categories}
          author={article.author.name}
          content={article.content}
          imgUrl={article.cover.publicURL}
          date={article.created_at}
          slug={article.slug}
        />
      )
    })
  }
  let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadCards()
        observer.unobserve(entry.target)
      }
    })
  })
  document.querySelectorAll(".card").forEach(card => {
    observer.observe(card)
  })