Merge pull request #6 from supabase-community/feat-pagination

dthyresson · web-flow · commit 972531855a1e · 2022-03-28T08:02:05.000-04:00
diff --git a/app/lib/comment-item.tsx b/app/lib/comment-item.tsx
@@ -56,7 +56,7 @@ export function CommentItem(props: {
     <div className="flex space-x-3 py-4">
       <img
         className="h-6 w-6 rounded-full"
-        src={props.comment.profile?.avatarUrl}
+        src={props.comment.profile?.avatarUrl ?? undefined}
         alt=""
       />
       <div className="flex-1 space-y-1">
diff --git a/app/lib/use-paginated-query.ts b/app/lib/use-paginated-query.ts
@@ -0,0 +1,45 @@
+import React from "react";
+import { useQuery, UseQueryArgs, UseQueryResponse } from "urql";
+
+/**
+ * Urql only supports "merge/infinite" pagination by adoptinh the GraphCache (a global normalized cache),
+ * which certainly is an overkill for this demo.
+ *
+ * This hook wraps `useQuery` from urql and adds a light-weight merge previous and current result API.
+ */
+export function usePaginatedQuery<Data = any, Variables = object>(
+  args: UseQueryArgs<Variables, Data> & {
+    /**
+     * Merge the old result with the new result.
+     */
+    mergeResult: (oldData: Data, newData: Data) => Data;
+  }
+): UseQueryResponse<Data, Variables> {
+  const [query, queryFn] = useQuery(args);
+
+  const { data, ...rest } = query;
+
+  const mergeRef = React.useRef({ current: data, last: data });
+
+  if (
+    data &&
+    mergeRef.current.current &&
+    query.data !== mergeRef.current.last
+  ) {
+    mergeRef.current.current = args.mergeResult(mergeRef.current.current, data);
+  }
+
+  if (data != null && mergeRef.current.current == null) {
+    mergeRef.current.current = data;
+  }
+
+  mergeRef.current.last = query.data;
+
+  return [
+    {
+      ...rest,
+      data: mergeRef.current.current,
+    },
+    queryFn,
+  ];
+}
diff --git a/app/pages/account.tsx b/app/pages/account.tsx
@@ -40,16 +40,12 @@ const Account: NextPage = () => {
 
   if (profile) {
     return <AccountForm profile={profile} />;
-  } else {
-    {
-      return (
-        <div className="w-full">
-          profileQuery.fetching && <Loading />
-        </div>
-      );
-    }
   }
 
+  return (
+    <div className="w-full">{profileQuery.fetching ? <Loading /> : null}</div>
+  );
+
   return null;
 };
 
diff --git a/app/pages/comments.tsx b/app/pages/comments.tsx
@@ -2,21 +2,25 @@ import { Button } from "@supabase/ui";
 import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
+import React from "react";
 import { useQuery } from "urql";
 import { gql } from "../gql";
 import { CommentItem } from "../lib/comment-item";
 import { Container } from "../lib/container";
 import { Loading } from "../lib/loading";
 import { MainSection } from "../lib/main-section";
+import { usePaginatedQuery } from "../lib/use-paginated-query";
 
 const CommentsRouteQuery = gql(/* GraphQL */ `
-  query CommentsRouteQuery {
+  query CommentsRouteQuery($after: Cursor) {
     comments: commentCollection(
       orderBy: [{ createdAt: DescNullsFirst }]
       first: 15
+      after: $after
     ) {
       pageInfo {
         hasNextPage
+        endCursor
       }
       edges {
         cursor
@@ -30,7 +34,26 @@ const CommentsRouteQuery = gql(/* GraphQL */ `
 `);
 
 const Comments: NextPage = () => {
-  const [commentsQuery] = useQuery({ query: CommentsRouteQuery });
+  const [lastCursor, setLastCursor] = React.useState<string | undefined>(
+    undefined
+  );
+  const [commentsQuery] = usePaginatedQuery({
+    query: CommentsRouteQuery,
+    variables: {
+      after: lastCursor,
+    },
+    mergeResult(oldData, newData) {
+      return {
+        ...oldData,
+        ...newData,
+        comments: {
+          ...oldData.comments!,
+          ...newData.comments!,
+          edges: [...oldData.comments!.edges, ...newData.comments!.edges],
+        },
+      };
+    },
+  });
 
   return (
     <Container>
@@ -43,16 +66,25 @@ const Comments: NextPage = () => {
 
         <section className="text-gray-600 body-font overflow-hidden w-full">
           <div className="container px-3 py-24 mx-auto">
-            {commentsQuery.fetching && <Loading />}
             <div className="-my-8 divide-y-2 divide-gray-100">
               {commentsQuery?.data?.comments?.edges.map((edge) => (
                 <CommentItem comment={edge.node!} key={edge.cursor} />
               ))}
             </div>
+            {commentsQuery.fetching ? <Loading /> : null}
           </div>
           {commentsQuery.data?.comments?.pageInfo.hasNextPage ? (
             <div className="flex justify-center content-center">
-              <Button>Load more.</Button>
+              <Button
+                onClick={() =>
+                  setLastCursor(
+                    commentsQuery.data?.comments?.pageInfo.endCursor ??
+                      undefined
+                  )
+                }
+              >
+                Load more.
+              </Button>
             </div>
           ) : null}
         </section>
diff --git a/app/pages/index.tsx b/app/pages/index.tsx
@@ -1,26 +1,29 @@
 import { Auth, Button } from "@supabase/ui";
 import type { NextPage } from "next";
 import Head from "next/head";
-import { useQuery } from "urql";
+import React from "react";
 import { gql } from "../gql";
 import { Container } from "../lib/container";
 import { FeedItem } from "../lib/feed-item";
 import { Loading } from "../lib/loading";
 import { MainSection } from "../lib/main-section";
 import { noopUUID } from "../lib/noop-uuid";
+import { usePaginatedQuery } from "../lib/use-paginated-query";
 
 const IndexRouteQuery = gql(/* GraphQL */ `
-  query IndexRouteQuery($profileId: UUID!) {
+  query IndexRouteQuery($profileId: UUID!, $after: Cursor) {
     feed: postCollection(
       orderBy: [
         { voteRank: AscNullsFirst }
         { score: DescNullsFirst }
         { createdAt: DescNullsFirst }
       ]
       first: 15
+      after: $after
     ) {
       pageInfo {
         hasNextPage
+        endCursor
       }
       edges {
         cursor
@@ -35,10 +38,25 @@ const IndexRouteQuery = gql(/* GraphQL */ `
 
 const Home: NextPage = () => {
   const { user } = Auth.useUser();
-  const [indexQuery] = useQuery({
+  const [lastCursor, setLastCursor] = React.useState<string | undefined>(
+    undefined
+  );
+  const [indexQuery] = usePaginatedQuery({
     query: IndexRouteQuery,
     variables: {
       profileId: user?.id ?? noopUUID,
+      after: lastCursor,
+    },
+    mergeResult(oldData, newData) {
+      return {
+        ...oldData,
+        ...newData,
+        feed: {
+          ...oldData.feed!,
+          ...newData.feed!,
+          edges: [...oldData.feed!.edges, ...newData.feed!.edges],
+        },
+      };
     },
   });
 
@@ -54,15 +72,23 @@ const Home: NextPage = () => {
         <section className="text-gray-600 body-font overflow-hidden w-full">
           <div className="container px-3 py-24 mx-auto">
             <div className="-my-8">
-              {indexQuery.fetching && <Loading />}
               {indexQuery?.data?.feed?.edges.map((edge) => (
                 <FeedItem post={edge.node!} key={edge.cursor} />
               ))}
+              {indexQuery.fetching ? <Loading /> : null}
             </div>
           </div>
           {indexQuery.data?.feed?.pageInfo.hasNextPage ? (
             <div className="flex justify-center content-center">
-              <Button>Load more.</Button>
+              <Button
+                onClick={() => {
+                  setLastCursor(
+                    indexQuery.data?.feed?.pageInfo.endCursor ?? undefined
+                  );
+                }}
+              >
+                Load more.
+              </Button>
             </div>
           ) : null}
         </section>
diff --git a/app/pages/item/[postId].tsx b/app/pages/item/[postId].tsx
@@ -104,7 +104,7 @@ const Item: NextPage = () => {
     <Container>
       <MainSection>
         <div className="h-screen w-full">
-          {itemRouteQuery.fetching && <Loading />}
+          {itemRouteQuery.fetching ? <Loading /> : null}
 
           {post?.node == null ? null : (
             <>
diff --git a/app/pages/newest.tsx b/app/pages/newest.tsx
@@ -1,19 +1,25 @@
 import { Auth, Button } from "@supabase/ui";
 import type { NextPage } from "next";
 import Head from "next/head";
-import { useQuery } from "urql";
+import React from "react";
 import { gql } from "../gql";
 import { Container } from "../lib/container";
 import { FeedItem } from "../lib/feed-item";
 import { Loading } from "../lib/loading";
 import { MainSection } from "../lib/main-section";
 import { noopUUID } from "../lib/noop-uuid";
+import { usePaginatedQuery } from "../lib/use-paginated-query";
 
 const NewestRouteQuery = gql(/* GraphQL */ `
-  query NewestRouteQuery($profileId: UUID!) {
-    feed: postCollection(orderBy: [{ createdAt: DescNullsFirst }], first: 15) {
+  query NewestRouteQuery($profileId: UUID!, $after: Cursor) {
+    feed: postCollection(
+      orderBy: [{ createdAt: DescNullsFirst }]
+      first: 15
+      after: $after
+    ) {
       pageInfo {
         hasNextPage
+        endCursor
       }
       edges {
         cursor
@@ -28,10 +34,25 @@ const NewestRouteQuery = gql(/* GraphQL */ `
 
 const Newest: NextPage = () => {
   const { user } = Auth.useUser();
-  const [newestQuery] = useQuery({
+  const [lastCursor, setLastCursor] = React.useState<string | undefined>(
+    undefined
+  );
+  const [newestQuery] = usePaginatedQuery({
     query: NewestRouteQuery,
     variables: {
       profileId: user?.id ?? noopUUID,
+      after: lastCursor,
+    },
+    mergeResult(oldData, newData) {
+      return {
+        ...oldData,
+        ...newData,
+        feed: {
+          ...oldData.feed!,
+          ...newData.feed!,
+          edges: [...oldData.feed!.edges, ...newData.feed!.edges],
+        },
+      };
     },
   });
 
@@ -47,15 +68,23 @@ const Newest: NextPage = () => {
         <section className="text-gray-600 body-font overflow-hidden w-full">
           <div className="container px-5 py-24 mx-auto">
             <div className="-my-8">
-              {newestQuery.fetching && <Loading />}
               {newestQuery?.data?.feed?.edges.map((edge) => (
                 <FeedItem post={edge.node!} key={edge.cursor} />
               ))}
             </div>
+            {newestQuery.fetching ? <Loading /> : null}
           </div>
           {newestQuery.data?.feed?.pageInfo.hasNextPage ? (
             <div className="flex justify-center content-center">
-              <Button>Load more.</Button>
+              <Button
+                onClick={() => {
+                  setLastCursor(
+                    newestQuery.data?.feed?.pageInfo.endCursor ?? undefined
+                  );
+                }}
+              >
+                Load more.
+              </Button>
             </div>
           ) : null}
         </section>
diff --git a/app/pages/profile/[profileId].tsx b/app/pages/profile/[profileId].tsx
@@ -77,7 +77,7 @@ const Profile: NextPage = () => {
 
       <MainSection>
         <div className="w-full">
-          {profileQuery.fetching && <Loading />}
+          {profileQuery.fetching ? <Loading /> : null}
           {profile == null ? null : (
             <section className="text-gray-600 body-font overflow-hidden">
               <div className="container px-5 py-24 pt-10 mx-auto">
