React not re-rendering items, when array gets replaced

We are using Next.js + ApolloClient and we have a simple pagination, where, when I click on "2" the next page should be fetched and displayed.

This looks somewhat like this

export default function Reviews ({ rating }) {
  const router = useRouter()
  const id = router.query.id
  const [page, setPage] = useState(1)
  const [comments, setComments] = useState(rating.comments) // This is fetched by the server. Initial data
  const [fetchComments] = useLazyQuery(GET_RATING_COMMENTS, {
    variables: {
      id,
      page,
      first: 3
    },
    onCompleted: data => {
      setComments(data.comments)
    }
  })

  const handleOnPageChange = page => {
    setPage(page)
    fetchComments()
  }

  const reviews = comments.map(rating => (

So, it seems like ApolloClient caches the result, which is cool. So the pagination AND rerender works perfectly fine, when the result gets initially fetched per a HTTP Request (not cached) but after ApolloClient has cached the result and I revisit a page that I've clicked before (for instance 2) then reviews is not getting updated.

Which is weird because, onCompleted gets called with the cached result. So I set it but its not updating anymore. The list does not change.

The list only changes initially, when the Page has not been visited yet. If its cached, nothing happens anymore. Why?

Btw, if I add fetchPolicy: 'no-cache' it magically works.