Merge pull request #947 from lens-protocol/T-20337/useExplorePublicat…

…ions-useExploreProfiles-useRecommendedProfiles

feat: Suspense support to useExplorePublications, useExploreProfiles, useRecommendedProfiles

.changeset/seven-pugs-own.md

@@ -0,0 +1,7 @@
+---
+"@lens-protocol/react": minor
+"@lens-protocol/react-native": minor
+"@lens-protocol/react-web": minor
+---
+
+**feat:** add React Suspense support to `useExplorePublications`, `useExploreProfiles`, `useRecommendedProfiles` hooks

examples/web/src/discovery/UseExploreProfiles.tsx

@@ -1,21 +1,16 @@
 import { useExploreProfiles, ExploreProfilesOrderByType } from '@lens-protocol/react-web';
 
-import { ErrorMessage } from '../components/error/ErrorMessage';
-import { Loading } from '../components/loading/Loading';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
 import { ProfileCard } from '../profiles/components/ProfileCard';
 
 export function UseExploreProfiles() {
-  const { data, error, loading, hasMore, observeRef } = useInfiniteScroll(
+  const { data, hasMore, observeRef } = useInfiniteScroll(
     useExploreProfiles({
       orderBy: ExploreProfilesOrderByType.LatestCreated,
+      suspense: true,
     }),
   );
 
-  if (loading) return <Loading />;
-
-  if (error) return <ErrorMessage error={error} />;
-
   if (data.length === 0) return <p>No items</p>;
 
   return (

examples/web/src/discovery/UseExplorePublications.tsx

@@ -2,27 +2,20 @@ import { ExplorePublicationsOrderByType, useExplorePublications } from '@lens-pr
 
 import { CollectCriteria } from '../components/CollectPolicy';
 import { PublicationCard } from '../components/cards';
-import { ErrorMessage } from '../components/error/ErrorMessage';
-import { Loading } from '../components/loading/Loading';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
 
 export function UseExplorePublications() {
   const {
     data: publications,
-    error,
-    loading,
     hasMore,
     observeRef,
   } = useInfiniteScroll(
     useExplorePublications({
       orderBy: ExplorePublicationsOrderByType.Latest,
+      suspense: true,
     }),
   );
 
-  if (loading) return <Loading />;
-
-  if (error) return <ErrorMessage error={error} />;
-
   return (
     <div>
       <h1>

examples/web/src/discovery/UseRecommendedProfiles.tsx

@@ -5,21 +5,18 @@ import {
 } from '@lens-protocol/react-web';
 
 import { RequireProfileSession } from '../components/auth';
-import { ErrorMessage } from '../components/error/ErrorMessage';
-import { Loading } from '../components/loading/Loading';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
 import { ProfileCard } from '../profiles/components/ProfileCard';
 
 function UseRecommendedProfilesInner({ profileId }: { profileId: ProfileId }) {
   const {
     data: profiles,
-    error,
-    loading,
     hasMore,
     observeRef,
   } = useInfiniteScroll(
     useRecommendedProfiles({
       for: profileId,
+      suspense: true,
     }),
   );
 
@@ -29,21 +26,20 @@ function UseRecommendedProfilesInner({ profileId }: { profileId: ProfileId }) {
     void dismiss({ profileIds: [id] });
   };
 
-  if (loading) return <Loading />;
-
-  if (error) return <ErrorMessage error={error} />;
-
   return (
     <div>
-      {profiles.map((p) => (
-        <div key={p.id}>
-          <ProfileCard profile={p}>
+      <h2>
+        <code>useRecommendedProfiles</code>
+      </h2>
+      <div>
+        {profiles.map((p) => (
+          <ProfileCard key={p.id} profile={p}>
             <button onClick={() => dismissRecommendation(p.id)} disabled={dismissing}>
               Dismiss recommendation
             </button>
           </ProfileCard>
-        </div>
-      ))}
+        ))}
+      </div>
 
       {hasMore && <p ref={observeRef}>Loading more...</p>}
     </div>
@@ -52,14 +48,8 @@ function UseRecommendedProfilesInner({ profileId }: { profileId: ProfileId }) {
 
 export function UseRecommendedProfiles() {
   return (
-    <div>
-      <h2>
-        <code>useRecommendedProfiles & useDismissRecommendedProfiles</code>
-      </h2>
-
-      <RequireProfileSession message="Log in to view this example.">
-        {({ profile }) => <UseRecommendedProfilesInner profileId={profile.id} />}
-      </RequireProfileSession>
-    </div>
+    <RequireProfileSession message="Log in to view this example.">
+      {({ profile }) => <UseRecommendedProfilesInner profileId={profile.id} />}
+    </RequireProfileSession>
   );
 }

packages/react/src/authentication/useSession.ts

@@ -99,7 +99,7 @@ export type UseSessionArgs = SuspenseEnabled;
  * function Page() {
  *   const { data, error, loading } = useSession();
  *
- *   if (loading) return <p>Loading...</p>;
+ *   if (loading) return <Loader />;
  *
  *   if (error) return <p>Something went wrong.</p>;
  *

packages/react/src/discovery/useExploreProfiles.ts

@@ -1,61 +1,101 @@
 import {
+  ExploreProfilesDocument,
   ExploreProfilesOrderByType,
   ExploreProfilesRequest,
+  ExploreProfilesWhere,
   Profile,
-  useExploreProfiles as useBaseExploreProfilesQuery,
 } from '@lens-protocol/api-bindings';
 
 import { useLensApolloClient } from '../helpers/arguments';
-import { PaginatedArgs, PaginatedReadResult, usePaginatedReadResult } from '../helpers/reads';
+import { PaginatedArgs, PaginatedReadResult } from '../helpers/reads';
+import {
+  SuspendablePaginatedResult,
+  SuspenseEnabled,
+  SuspensePaginatedResult,
+  useSuspendablePaginatedQuery,
+} from '../helpers/suspense';
 import { useFragmentVariables } from '../helpers/variables';
 
+/**
+ * {@link useExploreProfiles} hook arguments
+ */
 export type UseExploreProfilesArgs = PaginatedArgs<ExploreProfilesRequest>;
 
+export type { ExploreProfilesRequest, ExploreProfilesWhere };
+
 /**
- * `useExploreProfiles` is a paginated hook that lets you discover new profiles based on a defined criteria
- *
- * @category Discovery
- * @group Hooks
- * @param args - {@link UseExploreProfilesArgs}
+ * {@link useExploreProfiles} hook arguments with Suspense support
+ */
+export type UseSuspenseExploreProfilesArgs = SuspenseEnabled<UseExploreProfilesArgs>;
+
+/**
+ * Discover new profiles based on a defined criteria.
  *
- * @example
- * Explore the latest created profiles
  * ```tsx
- * import { useExploreProfiles, ExploreProfilesOrderByType } from '@lens-protocol/react';
+ * const { data, error, loading } = useExploreProfiles({
+ *   orderBy: ExploreProfilesOrderByType.LatestCreated,
+ * });
+ *
+ * if (loading) return <Loader />;
+ *
+ * if (error) return <Error message={error.message} />;
  *
- * function ExploreProfiles() {
- *   const { data, error, loading } = useExploreProfiles({
- *      orderBy: ExploreProfilesOrderByType.LatestCreated,
- *   });
+ * return (
+ *   <>
+ *     {data.map((profile) => (
+ *       <Profile key={profile.id} profile={profile} />
+ *     ))}
+ *   </>
+ * );
+ * ```
+ *
+ * @category Discovery
+ * @group Hooks
+ */
+export function useExploreProfiles(args?: UseExploreProfilesArgs): PaginatedReadResult<Profile[]>;
+
+/**
+ * Discover new profiles based on a defined criteria.
  *
- *   if (loading) return <p>Loading...</p>;
+ * This signature supports [React Suspense](https://react.dev/reference/react/Suspense).
  *
- *   if (error) return <p>Error: {error.message}</p>;
+ * ```ts
+ * const { data } = useExploreProfiles({
+ *   orderBy: ExploreProfilesOrderByType.LatestCreated,
+ *   suspense: true,
+ * );
  *
- *   return (
- *     <ul>
- *       {data.map((profile) => (
- *         <li key={profile.id}>{profile.handle}</li>
- *       ))}
- *     </ul>
- *   );
- * }
+ * console.log(data);
  * ```
+ *
+ * @experimental This API can change without notice
+ * @category Discovery
+ * @group Hooks
  */
 export function useExploreProfiles(
-  { where, limit, orderBy = ExploreProfilesOrderByType.LatestCreated }: UseExploreProfilesArgs = {
+  args: UseSuspenseExploreProfilesArgs,
+): SuspensePaginatedResult<Profile[]>;
+
+export function useExploreProfiles(
+  {
+    where,
+    limit,
+    orderBy = ExploreProfilesOrderByType.LatestCreated,
+    suspense = false,
+  }: UseExploreProfilesArgs & { suspense?: boolean } = {
     orderBy: ExploreProfilesOrderByType.LatestCreated,
+    suspense: false,
   },
-): PaginatedReadResult<Profile[]> {
-  return usePaginatedReadResult(
-    useBaseExploreProfilesQuery(
-      useLensApolloClient({
-        variables: useFragmentVariables({
-          limit,
-          where,
-          orderBy,
-        }),
+): SuspendablePaginatedResult<Profile[]> {
+  return useSuspendablePaginatedQuery({
+    suspense,
+    query: ExploreProfilesDocument,
+    options: useLensApolloClient({
+      variables: useFragmentVariables({
+        limit,
+        where,
+        orderBy,
       }),
-    ),
-  );
+    }),
+  });
 }