NextJs update GraphQL pagination limit with Apollo Client

I would like to update my exisiting Graphql Query to create a infinite Scroll in NextJs.
But I don’t know how to setup the update Function for the pagination limit.

What I have know:

Apollo Client:

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  uri: process.env.API_ENDPOINT,
  cache: new InMemoryCache(),
});

export default client;

My GraphQl query:

export const GETARTWORKS = gql`
  query Artworks($limit: Int) {
    artworks(sort: "id:ASC", pagination: { limit: $limit}) {
      data {
        id
        attributes {
          slug
          Artwork
          artist {
            data {
              id
              attributes {
                Fullname
                Name
              }
            }
          }
          Image {
            data {
              id
              attributes {
                placeholder
                formats
              }
            }
          }
        }
      }
    }
  }
`;

And my Index file:

import client from "@/graphql/apollo-client";
import { GETARTWORKS } from "@/graphql/lib/queries";
import { Artwork, Artworks } from "@/src/gql/graphql";
import InfiniteScroll from "react-infinite-scroll-component";
import { useState } from "react";

interface Props {
  data: Artworks;
}

export default function SSR({ data }: Props) {
  const [artworks, setArtworks] = useState<Artworks>(data);

  const handleLoadMore = async () => {
    const { data: res } = await client.query({
      query: GETARTWORKS,
      variables: {
        limit: data.length + 15,
      },
    });
    return { res };
  };
  setArtworks((artworks) => [...artworks, ...res.artworks.data]);
  return (
    <InfiniteScroll
      dataLength={artworks.length}
      next={handleLoadMore}
      hasMore={true}
      loader={<h4>Loading...</h4>}
      endMessage={
        <p style={{ textAlign: "center" }}>
          <b>Yay! You have seen it all</b>
        </p>
      }
    >
      <div className="container-fluid mx-auto globalPadding mt-40">
        <h1 className="arizona text-secondary text-4xl">SSR Page</h1>
        <div className="grid grid-cols-2 gap-4 mt-10">
          {data.map((artwork: Artwork, index: number) => {
            return (
              <div key={index} className="my-10">
                <h3 className="text-secondary text-4xl">
                  {artwork.attributes.Artwork}
                </h3>
                <p>{artwork.attributes.artist?.data?.attributes?.Fullname}</p>
              </div>
            );
          })}
        </div>
      </div>
    </InfiniteScroll>
  );
}

export async function getServerSideProps() {
  const { data: artworks } = await client.query({
    query: GETARTWORKS,
    variables: {
      limit: 15,
    },
  });
  return {
    props: {
      data: artworks.artworks.data,
    },
  };
}

the Problem I have is to Setup the second Query. At the moment I have this function but it’s not working … :

  const handleLoadMore = async () => {
    const { data: res } = await client.query({
      query: GETARTWORKS,
      variables: {
        limit: data.length + 15,
      },
    });
    return { res };
  };
  setArtworks((artworks) => [...artworks, ...res.artworks.data]);

I’m new to Strapi and NextJS so any help is more than welcome.
Best, Carol