How to efficiently paginate data in a React application using GraphQL and TypeScript?

I’m building a React application with TypeScript where I fetch data from a GraphQL server. I’ve been trying to implement pagination for my data, but I’m facing some challenges in ensuring that the data is fetched efficiently and the user experience remains smooth.

Current Approach:
I’m using Apollo Client for fetching data. Here’s a snippet of my GraphQL query:

query GetItems($offset: Int, $limit: Int) {
  items(offset: $offset, limit: $limit) {
    id
    name
    description
  }
}

And in my React component:

import { useQuery } from '@apollo/client';
import { GET_ITEMS } from './queries';

type Item = {
  id: string;
  name: string;
  description: string;
};

const { loading, error, data } = useQuery<{ items: Item[] }>(GET_ITEMS, {
  variables: { offset: 0, limit: 10 }
});

Challenges:

1. When I fetch the next set of data, there’s a noticeable delay which affects the user experience.
2. I’m unsure about how to handle caching and avoid refetching data that’s already been fetched.
3. Ensuring type safety when paginating and caching data has been a bit tricky.

Has anyone implemented efficient pagination in a similar TypeScript setup? Any best practices or recommendations would be greatly appreciated!