feat: add suspense to useProfileFollowers and useProfileFollowing hooks

.changeset/giant-crabs-invent.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 `useProfileFollowers` and `useProfileFollowing` hooks

examples/web/src/profiles/UseProfileFollowers.tsx

@@ -1,27 +1,20 @@
 import { profileId, useProfileFollowers } 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 './components/ProfileCard';
 
 export function UseProfileFollowers() {
   const {
     data: profiles,
-    error,
-    loading,
     hasMore,
     observeRef,
   } = useInfiniteScroll(
     useProfileFollowers({
-      of: profileId('0x03'),
+      of: profileId('0x07'),
+      suspense: true,
     }),
   );
 
-  if (loading) return <Loading />;
-
-  if (error) return <ErrorMessage error={error} />;
-
   return (
     <div>
       <h1>

examples/web/src/profiles/UseProfileFollowing.tsx

@@ -1,27 +1,20 @@
 import { profileId, useProfileFollowing } 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 './components/ProfileCard';
 
 export function UseProfileFollowing() {
   const {
     data: profiles,
-    error,
-    loading,
     hasMore,
     observeRef,
   } = useInfiniteScroll(
     useProfileFollowing({
-      for: profileId('0x04'),
+      for: profileId('0x0109'),
+      suspense: true,
     }),
   );
 
-  if (loading) return <Loading />;
-
-  if (error) return <ErrorMessage error={error} />;
-
   return (
     <div>
       <h1>

packages/react/src/profile/useProfileFollowers.ts

@@ -1,37 +1,75 @@
-import {
-  Profile,
-  FollowersRequest,
-  useFollowers as useFollowersHook,
-} from '@lens-protocol/api-bindings';
+import { Profile, FollowersRequest, FollowersDocument } 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 useProfileFollowers} hook arguments
  */
 export type UseProfileFollowersArgs = PaginatedArgs<FollowersRequest>;
 
+export type { FollowersRequest };
+
 /**
- * `useProfileFollowers` is a paginated hook that lets you fetch profiles that follow a requested profile.
+ * {@link useProfileFollowers} hook arguments with Suspense support
  *
- * @category Profiles
- * @group Hooks
+ * @experimental This API can change without notice
+ */
+export type UseSuspenseProfileFollowersArgs = SuspenseEnabled<UseProfileFollowersArgs>;
+
+/**
+ * Fetch profiles that follow a requested profile.
  *
  * @example
  * ```tsx
  * const { data, loading, error } = useProfileFollowers({
  *   of: '0x123',
  * });
  * ```
+ *
+ * @category Profiles
+ * @group Hooks
  */
-export function useProfileFollowers(args: UseProfileFollowersArgs): PaginatedReadResult<Profile[]> {
-  return usePaginatedReadResult(
-    useFollowersHook(
-      useLensApolloClient({
-        variables: useFragmentVariables(args),
-      }),
-    ),
-  );
+export function useProfileFollowers(args: UseProfileFollowersArgs): PaginatedReadResult<Profile[]>;
+
+/**
+ * Fetch profiles that follow a requested profile.
+ *
+ * This signature supports [React Suspense](https://react.dev/reference/react/Suspense).
+ *
+ * ```tsx
+ * const { data } = useProfileFollowers({
+ *   of: '0x123',
+ *   suspense: true,
+ * });
+ *
+ * console.log(data);
+ * ```
+ *
+ * @experimental This API can change without notice
+ * @category Profiles
+ * @group Hooks
+ */
+export function useProfileFollowers(
+  args: UseSuspenseProfileFollowersArgs,
+): SuspensePaginatedResult<Profile[]>;
+
+export function useProfileFollowers({
+  suspense = false,
+  ...args
+}: UseProfileFollowersArgs & { suspense?: boolean }): SuspendablePaginatedResult<Profile[]> {
+  return useSuspendablePaginatedQuery({
+    suspense,
+    query: FollowersDocument,
+    options: useLensApolloClient({
+      variables: useFragmentVariables(args),
+    }),
+  });
 }

packages/react/src/profile/useProfileFollowing.ts

@@ -1,37 +1,75 @@
-import {
-  Profile,
-  FollowingRequest,
-  useFollowing as useFollowingHook,
-} from '@lens-protocol/api-bindings';
+import { Profile, FollowingRequest, FollowingDocument } 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 useProfileFollowing} hook arguments
  */
 export type UseProfileFollowingArgs = PaginatedArgs<FollowingRequest>;
 
+export type { FollowingRequest };
+
 /**
- * `useProfileFollowing` is a paginated hook that lets you fetch profiles that are followed by a requested profile.
+ * {@link useProfileFollowing} hook arguments with Suspense support
  *
- * @category Profiles
- * @group Hooks
+ * @experimental This API can change without notice
+ */
+export type UseSuspenseProfileFollowingArgs = SuspenseEnabled<UseProfileFollowingArgs>;
+
+/**
+ * Fetch profiles that are followed by a requested profile.
  *
  * @example
  * ```tsx
  * const { data, loading, error } = useProfileFollowing({
  *   for: '0x123',
  * });
  * ```
+ *
+ * @category Profiles
+ * @group Hooks
  */
-export function useProfileFollowing(args: UseProfileFollowingArgs): PaginatedReadResult<Profile[]> {
-  return usePaginatedReadResult(
-    useFollowingHook(
-      useLensApolloClient({
-        variables: useFragmentVariables(args),
-      }),
-    ),
-  );
+export function useProfileFollowing(args: UseProfileFollowingArgs): PaginatedReadResult<Profile[]>;
+
+/**
+ * Fetch profiles that are followed by a requested profile.
+ *
+ * This signature supports [React Suspense](https://react.dev/reference/react/Suspense).
+ *
+ * ```tsx
+ * const { data } = useProfileFollowing({
+ *   for: '0x123',
+ *   suspense: true,
+ * });
+ *
+ * console.log(data);
+ * ```
+ *
+ * @experimental This API can change without notice
+ * @category Profiles
+ * @group Hooks
+ */
+export function useProfileFollowing(
+  args: UseSuspenseProfileFollowingArgs,
+): SuspensePaginatedResult<Profile[]>;
+
+export function useProfileFollowing({
+  suspense = false,
+  ...args
+}: UseProfileFollowingArgs & { suspense?: boolean }): SuspendablePaginatedResult<Profile[]> {
+  return useSuspendablePaginatedQuery({
+    suspense,
+    query: FollowingDocument,
+    options: useLensApolloClient({
+      variables: useFragmentVariables(args),
+    }),
+  });
 }