gatsbyPaginatedList.tsx

import { gql, useLazyQuery } from "@apollo/client";

import Layout from "../components/Layout";

interface Post {
  databaseId: number;
  title: string;
};

interface PostEdge {
  node: Post;
};

const POSTS_PER_PAGE = 10;

const GET_POSTS = gql`
  query getPosts($first: Int!, $after: String) {
    posts(first: $first, after: $after) {
      pageInfo {
        hasNextPage
        endCursor
      }
      edges {
        node {
          id
          databaseId
          title
          slug
        }
      }
    }
  }
`;

export default function Blog(props) {
  const { initialPosts, initialEndCursor, initialHasNextPage } = props;
  const [fetchMorePosts, { called, loading, error, data }] = useLazyQuery(GET_POSTS, {
    notifyOnNetworkStatusChange: true,
  });
  const runtimePosts = data?.posts?.edges?.map((edge: PostEdge) => edge.node) || [];
  const posts = [...initialPosts, ...runtimePosts];
  const havePosts = Boolean(posts.length);
  const haveMorePosts = called ? Boolean(data?.posts?.pageInfo?.hasNextPage) : initialHasNextPage;

  return (
    <Layout>
      <h1>Blog</h1>
      {!havePosts && loading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>An error has occurred.</p>
      ) : !havePosts ? (
        <p>No posts found.</p>
      ) : (
        posts.map((post: Post) => {
          return (
            <article key={post.databaseId} style={{ border: "2px solid #eee", padding: "1rem", marginBottom: "1rem", borderRadius: "10px" }}>
              <h2>{post.title}</h2>
            </article>
          );
        })
      )}
      {havePosts ? (
        haveMorePosts ? (
          <form onSubmit={event => {
            event.preventDefault();
            fetchMorePosts({
              variables: {
                first: 5,
                after: data?.posts?.pageInfo?.endCursor ?? initialEndCursor,
              }
            });
          }}>
            <button type="submit" disabled={loading}>
              {loading ? "Loading..." : "Load more"}
            </button>
          </form>
        ) : (
          <p>✅ All posts loaded.</p>
        )
      ) : null}
    </Layout>
  );
}