refactor: use react-query for infinite fetch scrolling

package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@t3-oss/env-nextjs": "^0.7.1",
     "@tanstack/react-query": "^5.24.1",
+    "@tanstack/react-query-devtools": "^5.24.8",
     "@tanstack/react-query-next-experimental": "^5.24.1",
     "@tiptap/react": "^2.2.4",
     "@tiptap/starter-kit": "^2.2.4",

src/actions/getRepositories.action.ts

@@ -1,21 +1,25 @@
 "use server";
 import repositoryService from "@/services/repository.service";
+import { revalidatePath } from "next/cache";
 
 type Props = {
   query?: string;
+  language?: string;
   offset?: number;
   limit?: number;
   cursor?: number;
 };
 
 export const getRepositoriesOnScroll = async ({
   query,
+  language,
   offset = 0,
   limit = 20,
   cursor,
 }: Props) => {
   return await repositoryService.getRepositoriesOnScroll({
     query,
+    language,
     offset,
     limit,
     cursor,

src/app/(app)/repositories/page.tsx

@@ -26,7 +26,13 @@ export default async function RepositoriesPage({ searchParams }: Props) {
   return (
     <RepositoriesProvider user={user} data={data} likes={likes}>
       <RepositoriesFilter languages={languages} />
-      <RepositoriesGridInfiniteScroll query={query} language={language} />
+
+      <RepositoriesGridInfiniteScroll
+        user={user}
+        query={query}
+        language={language}
+      />
+
       <DataSharingAgreementForm user={user} />
       <AddRepositoryForm />
     </RepositoriesProvider>

src/components/molecules/InputSearch.tsx

@@ -54,7 +54,7 @@ export const InputSearch = ({ placeholder }: Props) => {
                 "hidden h-8 w-full bg-transparent focus:border-0 focus:outline-none focus:ring-0",
                 "lg:flex",
               )}
-              placeholder={placeholder ? placeholder : "Type to search..."}
+              placeholder={placeholder ? placeholder : "Repository name..."}
               onChange={handleSearch}
               onFocus={() => setIsEditing(true)}
               onBlur={() => setIsEditing(false)}

src/components/molecules/PrefetchLink.tsx

@@ -0,0 +1,33 @@
+"use client";
+import Link from "next/link";
+import { useQueryClient } from "@tanstack/react-query";
+import { getRepositoriesOnScroll } from "@/actions/getRepositories.action";
+import { URL } from "@/constants";
+
+export const PrefetchLink = () => {
+  const queryClient = useQueryClient();
+
+  const prefetchRepositories = () => {
+    queryClient
+      .prefetchInfiniteQuery({
+        queryKey: ["repositories", { query: "", language: "" }],
+        queryFn: ({ pageParam }) =>
+          getRepositoriesOnScroll({ cursor: pageParam }),
+        initialPageParam: 0,
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+        pages: 1,
+        staleTime: 1000 * 60 * 5,
+      })
+      .catch(console.error);
+  };
+
+  return (
+    <Link
+      className="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+      href={URL.REPOSITORIES}
+      onMouseEnter={prefetchRepositories}
+    >
+      Get started
+    </Link>
+  );
+};

src/components/organisms/RepositoriesGrid/RepositoriesGridInfiniteScroll.tsx

@@ -1,52 +1,46 @@
 "use client";
-import { useInfiniteScroll } from "@/hooks/useInfiniteScroll";
+
+import { useFetchInfiniteRepositories } from "@/hooks/useFetchInfiniteRepositories";
+import { useFetchNextPage } from "@/hooks/useFetchNextPage";
 import { RepositoryCard } from "@/components/organisms/RepositoryCard/_index";
 import { RepositoriesLoader } from "@/components/organisms/RepositoriesGrid/RepositoriesLoader";
 import { RepositoriesGridLayout } from "./RepositoriesGridLayout";
-import { useRepositoriesContext } from "@/context/repositoriesContext";
-import { useToggleFilter } from "@/stores/useToggleFilter";
-import { getFilteredRepositories } from "@/utils/getFilteredRepositories";
+import { User } from "@/types/prisma.type";
 
 type Props = {
+  user: User | null;
   query: string;
   language: string;
 };
 
-export const RepositoriesGridInfiniteScroll = ({ query, language }: Props) => {
-  const { data: initialRepositories, user } = useRepositoriesContext();
-  const { repositories, repositoriesAlreadyStarred, ref, isDisabled } =
-    useInfiniteScroll({
-      initialRepositories,
-      limit: 20,
-      user,
-    });
-
-  const { toggleFilter } = useToggleFilter();
+export const RepositoriesGridInfiniteScroll = ({
+  user,
+  query,
+  language,
+}: Props) => {
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useFetchInfiniteRepositories({ query, language });
 
-  const filteredRepositories = getFilteredRepositories({
-    query,
-    language,
-    initialRepositories,
-    repositories,
-    user,
-    toggleFilter,
+  const { ref } = useFetchNextPage({
+    action: fetchNextPage,
+    hasNextPage,
   });
 
-  console.log("rerendering RepositoriesGridInfiniteScroll");
-
   return (
     <>
-      <RepositoriesGridLayout>
-        {filteredRepositories.map((repository) => (
-          <RepositoryCard
-            key={repository.id}
-            user={user}
-            repository={repository}
-            repositoriesAlreadyStarred={repositoriesAlreadyStarred}
-          />
-        ))}
-      </RepositoriesGridLayout>
-      <RepositoriesLoader isDisabled={isDisabled} ref={ref} />
+      {data?.pages.map((page, i) => (
+        <RepositoriesGridLayout key={i}>
+          {page.data.map((repository) => (
+            <RepositoryCard
+              key={repository.id}
+              user={user}
+              repository={repository}
+              // repositoriesAlreadyStarred={repositoriesAlreadyStarred}
+            />
+          ))}
+        </RepositoriesGridLayout>
+      ))}
+      <RepositoriesLoader isDisabled={isFetchingNextPage} ref={ref} />
     </>
   );
 };

src/components/organisms/RepositoriesGrid/RepositoriesLoader.tsx

@@ -1,15 +1,19 @@
-import { forwardRef, memo } from "react";
+import { forwardRef } from "react";
 
 type Props = {
-  isDisabled: boolean;
+  isDisabled?: boolean;
 };
 
 const RepositoriesLoader = forwardRef(
   (props: Props, ref: React.ForwardedRef<HTMLDivElement | null>) => {
     const { isDisabled } = props;
 
-    return isDisabled ? null : (
-      <div ref={ref} className="mt-6 flex flex-col items-center justify-center">
+    return (
+      <div
+        ref={ref}
+        className="mt-6 flex flex-col items-center justify-center"
+        style={{ visibility: !isDisabled ? "hidden" : "initial" }}
+      >
         <p className="text-sm text-gray-400">Loading more repositories...</p>
       </div>
     );

src/components/organisms/RepositoryCard/RepositoryCardHeader.tsx

@@ -22,6 +22,7 @@ export const RepositoryCardHeader = ({
           pictureUrl={`${repository.ownerAvatarUrl}?size=40`}
           alt={repository.ownerUsername}
         />
+
         <div className="flex flex-col">
           <Link
             href={repository.url}

src/components/templates/Hero.tsx

@@ -1,6 +1,5 @@
-import Link from "next/link";
 import Image from "next/image";
-import { URL } from "@/constants";
+import { PrefetchLink } from "../molecules/PrefetchLink";
 
 export const Hero = () => {
   return (
@@ -29,12 +28,7 @@ export const Hero = () => {
               and more engaging. Start exploring now!
             </p>
             <div className="mt-10 flex items-center justify-center gap-x-6">
-              <Link
-                className="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
-                href={URL.REPOSITORIES}
-              >
-                Get started
-              </Link>
+              <PrefetchLink />
               <a
                 href="#faqs"
                 className="text-sm font-semibold leading-6 text-white"

src/hooks/useFetchInfiniteRepositories.tsx

@@ -0,0 +1,20 @@
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+import { getRepositoriesOnScroll } from "@/actions/getRepositories.action";
+
+type Props = {
+  query: string;
+  language: string;
+};
+
+export const useFetchInfiniteRepositories = ({ query, language }: Props) => {
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useSuspenseInfiniteQuery({
+      queryKey: ["repositories", { query, language }],
+      queryFn: ({ pageParam }) =>
+        getRepositoriesOnScroll({ cursor: pageParam }),
+      initialPageParam: 0,
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    });
+
+  return { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading };
+};

src/hooks/useFetchNextPage.tsx

@@ -0,0 +1,26 @@
+import {
+  FetchNextPageOptions,
+  InfiniteData,
+  InfiniteQueryObserverResult,
+} from "@tanstack/react-query";
+import { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+
+type Props = {
+  action: (
+    options?: FetchNextPageOptions | undefined,
+  ) => Promise<InfiniteQueryObserverResult<InfiniteData<any>, Error>>;
+  hasNextPage: boolean;
+};
+
+export const useFetchNextPage = ({ action, hasNextPage }: Props) => {
+  const { ref, inView } = useInView();
+
+  useEffect(() => {
+    if (inView && hasNextPage) {
+      void action();
+    }
+  }, [inView]);
+
+  return { ref, inView };
+};

src/providers/TanstackProvider.tsx

@@ -2,6 +2,7 @@
 import React, { type PropsWithChildren, useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 export const TanstackProvider = ({ children }: PropsWithChildren) => {
   const [queryClient] = useState(
@@ -10,16 +11,18 @@ export const TanstackProvider = ({ children }: PropsWithChildren) => {
         defaultOptions: {
           queries: {
             refetchOnWindowFocus: false,
-            staleTime: 1000 * 60 * 5, // 5 minutes
-            refetchOnMount: false,
+            staleTime: 300000,
           },
         },
       }),
   );
 
   return (
     <QueryClientProvider client={queryClient}>
-      <ReactQueryStreamedHydration>{children}</ReactQueryStreamedHydration>
+      <ReactQueryStreamedHydration>
+        {children}
+        <ReactQueryDevtools initialIsOpen={false} />
+      </ReactQueryStreamedHydration>
     </QueryClientProvider>
   );
 };