Pagination in GraphCMS (Graph-ql) in Nextjs

Question

Can someone help me figure out how to implement pagination in a blogs list page? I have tried a couple of methods but all of them seem to break the site.

There are over 100 pages and It should Display 6 per page and load 6 more at the bottom if 'see more' is clicked.

query: I'm using the graphql-request package to communicate with the CMS.

export const getStaticProps = async () => {
  const url = process.env.ENDPOINT;
  const graphQLClient = new GraphQLClient(url, {
    headers: {
      Authorization: `Bearer ${process.env.GRAPH_CMS_TOKEN}`,
    },
  });
  const query = gql`
    query {
      blogsConnection(orderBy: publishedOn_DESC, first: 6) {
        edges {
          node {
            title
            publishedOn
            slug
            id
            image {
              url
            }
            doctor {
              name
              image {
                url
              }
              slug
            }
          }
        }
        pageInfo {
          endCursor
        }
      }
    }
  `;

  const result = await graphQLClient.request(query);
  const blogs = result.blogsConnection;
  return {
    props: {
      blogs,
    },
  };
};

return

<div className="mt-12 max-w-xl mx-auto grid gap-8 lg:grid-cols-3 lg:max-w-none w">
          {blogs?.edges.map((item) => (
            <div
              key={item.node.id}
              className="flex flex-col rounded-2xl shadow-lg overflow-hidden"
            >
              <Link href={`/blogs/${item.node.slug}`} passHref>
                <div className="flex-shrink-0">
                  <img
                    className="h-72 w-full object-contain rounded-2xl cursor-pointer"
                    src={item.node.image.url}
                    alt=""
                  />
                </div>
              </Link>
              <div className="flex-1 bg-white p-6 flex flex-col justify-between">
                <div className="flex-1">
                  <Link
                    href={`/blogs/${item.node.slug}`}
                    passHref
                    className="block mt-2"
                  >
                    <p className="text-lg font-semibold text-gray-900 cursor-pointer font-heading">
                      {item.node.title}
                    </p>
                  </Link>
                </div>
                <div className="mt-6 flex items-center">
                  <div className="flex-shrink-0">
                    <Link href={`/doctors/${item.node.doctor.slug}`} passHref>
                      <a>
                        <span className="sr-only">{item.node.doctor.name}</span>
                        <img
                          className="h-10 w-10 rounded-full"
                          src={item.node.doctor.image.url}
                          alt=""
                        />
                      </a>
                    </Link>
                  </div>
                  <div className="ml-3">
                    <p className="text-sm font-medium text-gray-900">
                      <Link href={`/doctors/${item.node.doctor.slug}`}>
                        <a className="font-qs font-semibold">
                          {item.node.doctor.name}
                        </a>
                      </Link>
                    </p>
                    <div className="flex space-x-1 text-sm text-gray-500 font-qs">
                      <time>{item.node.publishedOn}</time>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="flex justify-center ">
          <button className="my-8 rounded-xl py-4 px-6 bg-brandPink font-qs font-semibold text-white">
            See More
          </button>
        </div>

Thanks