feat: React Suspense support for useFeed

lens-protocol · May 14, 2024 · 5b5b0ff · 5b5b0ff
1 parent 21f652d
commit 5b5b0ff
Show file tree

Hide file tree

Showing 11 changed files with 169 additions and 145 deletions.
diff --git a/.changeset/soft-yaks-shop.md b/.changeset/soft-yaks-shop.md
@@ -0,0 +1,7 @@
+---
+"@lens-protocol/react": patch
+"@lens-protocol/react-native": patch
+"@lens-protocol/react-web": patch
+---
+
+**feat:** add React Suspense support to `useFeed` hook
diff --git a/examples/web/src/components/auth/WhenLoggedIn.tsx b/examples/web/src/components/auth/WhenLoggedIn.tsx
@@ -7,9 +7,6 @@ import {
 } from '@lens-protocol/react-web';
 import { ReactNode } from 'react';
 
-import { ErrorMessage } from '../error/ErrorMessage';
-import { Loading } from '../loading/Loading';
-
 export type RenderFunction<T extends Session> = (session: T) => ReactNode;
 
 export type LoggedInChildren<T extends Session> = ReactNode | RenderFunction<T>;
@@ -30,15 +27,7 @@ export function WhenLoggedIn<
   T extends SessionType.JustWallet | SessionType.WithProfile,
   S extends WalletOnlySession | ProfileSession,
 >(props: WhenLoggedInProps<T, S>) {
-  const { data: session, loading, error } = useSession();
-
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return <ErrorMessage error={error} />;
-  }
+  const { data: session } = useSession({ suspense: true });
 
   if (session.type !== props.with) {
     return props.fallback ?? null;

diff --git a/examples/web/src/discovery/UseFeed.tsx b/examples/web/src/discovery/UseFeed.tsx
@@ -1,31 +1,23 @@
-import { ProfileId, useFeed } from '@lens-protocol/react-web';
+import { useFeed } from '@lens-protocol/react-web';
 
 import { RequireProfileSession } from '../components/auth';
 import { PublicationCard } from '../components/cards';
-import { ErrorMessage } from '../components/error/ErrorMessage';
-import { Loading } from '../components/loading/Loading';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
 
-function UseFeedInner({ profileId }: { profileId: ProfileId }) {
-  const { data, error, loading, hasMore, beforeCount, observeRef, prev } = useInfiniteScroll(
+function Feed() {
+  const { data, hasMore, observeRef } = useInfiniteScroll(
     useFeed({
-      where: {
-        for: profileId,
-      },
+      suspense: true,
     }),
   );
 
   return (
     <div>
-      {data?.length === 0 && <p>No items</p>}
-
-      {loading && <Loading />}
-
-      {error && <ErrorMessage error={error} />}
+      <h1>
+        <code>useFeed</code>
+      </h1>
 
-      <button disabled={loading || beforeCount === 0} onClick={prev}>
-        Fetch newer
-      </button>
+      {data?.length === 0 && <p>No items</p>}
 
       {data?.map((item, i) => (
         <PublicationCard key={`${item.root.id}-${i}`} publication={item.root} />
@@ -38,14 +30,8 @@ function UseFeedInner({ profileId }: { profileId: ProfileId }) {
 
 export function UseFeed() {
   return (
-    <div>
-      <h1>
-        <code>useFeed</code>
-      </h1>
-
-      <RequireProfileSession message="Log in to view this example.">
-        {({ profile }) => <UseFeedInner profileId={profile.id} />}
-      </RequireProfileSession>
-    </div>
+    <RequireProfileSession message="Log in to view this example.">
+      {() => <Feed />}
+    </RequireProfileSession>
   );
 }
diff --git a/packages/react/src/authentication/useSession.ts b/packages/react/src/authentication/useSession.ts
@@ -89,7 +89,7 @@ export type Session = AnonymousSession | ProfileSession | WalletOnlySession;
 /**
  * {@link useSession} hook arguments
  */
-export type UseSessionArgs<TSuspense extends boolean> = SuspenseEnabled<TSuspense>;
+export type UseSessionArgs = SuspenseEnabled;
 
 /**
  * Returns current {@link Session} data.
@@ -125,7 +125,7 @@ export type UseSessionArgs<TSuspense extends boolean> = SuspenseEnabled<TSuspens
  * @category Authentication
  * @group Hooks
  */
-export function useSession(args: UseSessionArgs<true>): SuspenseResult<Session>;
+export function useSession(args: UseSessionArgs): SuspenseResult<Session>;
 
 /**
  * Returns current {@link Session} data.
@@ -160,11 +160,11 @@ export function useSession(args: UseSessionArgs<true>): SuspenseResult<Session>;
  * @category Authentication
  * @group Hooks
  */
-export function useSession(args?: UseSessionArgs<never>): ReadResult<Session, UnspecifiedError>;
+export function useSession(): ReadResult<Session, UnspecifiedError>;
 
-export function useSession(
-  args?: UseSessionArgs<boolean>,
-): ReadResult<Session, UnspecifiedError> | SuspenseResult<Session> {
+export function useSession(args?: {
+  suspense: boolean;
+}): ReadResult<Session, UnspecifiedError> | SuspenseResult<Session> {
   const sessionData = useSessionDataVar();
 
   const [primeCacheWithProfile, data] = useProfileFromCache(sessionData);

diff --git a/packages/react/src/discovery/useFeed.ts b/packages/react/src/discovery/useFeed.ts
@@ -1,60 +1,112 @@
-import { FeedItem, FeedRequest, useFeed as useBaseFeedQuery } from '@lens-protocol/api-bindings';
+import { FeedDocument, FeedItem, FeedRequest, FeedWhere } from '@lens-protocol/api-bindings';
 
-import { SessionType, useSession } from '../authentication';
+import { SessionType, UseSessionArgs, useSession } from '../authentication';
 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 useFeed} hook arguments
+ */
 export type UseFeedArgs = PaginatedArgs<FeedRequest>;
 
+export type { FeedRequest, FeedWhere };
+
+/**
+ * {@link useFeed} hook arguments with Suspense support
+ *
+ * @experimental This API can change without notice
+ */
+export type UseSuspenseFeedArgs = SuspenseEnabled<UseFeedArgs>;
+
 /**
  * Fetch a the feed of a given profile and filters.
  *
  * You MUST be authenticated via {@link useLogin} to use this hook.
  *
+ * @example
+ * ```tsx
+ * const { data, loading, error } =  useFeed({
+ *   where: {
+ *     for: '0x01`, // profileId
+ *   },
+ * });
+ *
+ * if (loading) return <div>Loading...</div>;
+ *
+ * if (error) return <div>Error: {error.message}</div>;
+ *
+ * return (
+ *   <ul>
+ *     {data.map((item, idx) => (
+ *       <li key={`${item.root.id}-${idx}`}>
+ *         // render item details
+ *       </li>
+ *     ))}
+ *   </ul>
+ * );
+ * ```
+ *
  * @category Discovery
  * @group Hooks
  * @param args - {@link UseFeedArgs}
+ */
+export function useFeed({ where }: UseFeedArgs): PaginatedReadResult<FeedItem[]>;
+
+/**
+ * Fetch a the feed of a given profile and filters.
+ *
+ * You MUST be authenticated via {@link useLogin} to use this hook.
+ *
+ * This signature supports [React Suspense](https://react.dev/reference/react/Suspense).
  *
  * @example
  * ```tsx
- * import { useFeed, ProfileId } from '@lens-protocol/react';
- *
- * function Feed({ profileId }: { profileId: ProfileId }) {
- *   const { data, loading, error } =  useFeed({
- *      where: {
- *        for: profileId,
- *      },
- *    });
- *
- *   if (loading) return <div>Loading...</div>;
- *
- *   if (error) return <div>Error: {error.message}</div>;
- *
- *   return (
- *     <ul>
- *       {data.map((item, idx) => (
- *         <li key={`${item.root.id}-${idx}`}>
- *           // render item details
- *         </li>
- *       ))}
- *     </ul>
- *   );
- * }
+ * const { data, loading, error } =  useFeed({
+ *   where: {
+ *     for: '0x01`, // profileId
+ *   },
+ *   suspense: true,
+ * });
+ *
+ * return (
+ *   <ul>
+ *     {data.map((item, idx) => (
+ *       <li key={`${item.root.id}-${idx}`}>
+ *         // render item details
+ *       </li>
+ *     ))}
+ *   </ul>
+ * );
  * ```
+ *
+ * @category Discovery
+ * @group Hooks
+ * @param args - {@link UseFeedArgs}
  */
-export function useFeed({ where }: UseFeedArgs): PaginatedReadResult<FeedItem[]> {
-  const { data: session } = useSession();
-
-  return usePaginatedReadResult(
-    useBaseFeedQuery(
-      useLensApolloClient({
-        variables: useFragmentVariables({
-          where,
-          statsFor: where?.metadata?.publishedOn,
-        }),
-        skip: session?.type !== SessionType.WithProfile,
+export function useFeed({ where }: UseSuspenseFeedArgs): SuspensePaginatedResult<FeedItem[]>;
+
+export function useFeed({
+  suspense = false,
+  where,
+}: UseFeedArgs & { suspense?: boolean }): SuspendablePaginatedResult<FeedItem[]> {
+  const { data: session } = useSession({ suspense } as UseSessionArgs);
+
+  return useSuspendablePaginatedQuery({
+    suspense,
+    query: FeedDocument,
+    options: useLensApolloClient({
+      variables: useFragmentVariables({
+        where,
+        statsFor: where?.metadata?.publishedOn,
       }),
-    ),
-  );
+      skip: session.type !== SessionType.WithProfile,
+    }),
+  });
 }
diff --git a/packages/react/src/helpers/reads.ts b/packages/react/src/helpers/reads.ts
@@ -12,7 +12,6 @@ import {
   InputMaybe,
   Cursor,
   PaginatedResultInfo,
-  LimitType,
 } from '@lens-protocol/api-bindings';
 import { Prettify } from '@lens-protocol/shared-kernel';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -111,20 +110,7 @@ export function useReadResult<
   return buildReadResult(data?.result, error);
 }
 
-export type OmitCursor<T> = Omit<T, 'cursor'>;
-
-export type PaginatedArgs<T> = Prettify<
-  OmitCursor<
-    T & {
-      /**
-       * The number of items to return.
-       *
-       * @defaultValue Default value is set by the API and it might differ between queries.
-       */
-      limit?: LimitType;
-    }
-  >
->;
+export type PaginatedArgs<T> = Prettify<Omit<T, 'cursor'>>;
 
 /**
  * A paginated read result.

diff --git a/packages/react/src/helpers/suspense.ts b/packages/react/src/helpers/suspense.ts
@@ -51,9 +51,8 @@ export type SuspenseReadResult<T, E = never> = SuspenseResultWithError<T, E>;
  *
  * @experimental This is an experimental type that can change at any time.
  */
-export type SuspenseEnabled<TSuspense extends boolean> = {
-  suspense?: TSuspense;
-};
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type SuspenseEnabled<T = {}> = T & { suspense: true };
 
 /**
  * @internal

diff --git a/packages/react/src/misc/useLatestPaidActions.ts b/packages/react/src/misc/useLatestPaidActions.ts
@@ -43,15 +43,13 @@ export type UseLatestPaidActionsArgs = PaginatedArgs<LatestPaidActionRequest>;
 export function useLatestPaidActions({
   filter,
   where,
-  limit,
 }: UseLatestPaidActionsArgs = {}): PaginatedReadResult<AnyPaidAction[]> {
   return usePaginatedReadResult(
     useLatestPaidActionsBase(
       useLensApolloClient({
         variables: useFragmentVariables({
           filter,
           where,
-          limit,
         }),
       }),
     ),

diff --git a/packages/react/src/profile/useProfile.ts b/packages/react/src/profile/useProfile.ts
@@ -13,7 +13,7 @@ import { ReadResult } from '../helpers/reads';
 import { SuspenseEnabled, SuspenseResultWithError, useSuspendableQuery } from '../helpers/suspense';
 import { useFragmentVariables } from '../helpers/variables';
 
-function profileNotFound({ forProfileId, forHandle }: UseProfileArgs<boolean>) {
+function profileNotFound({ forProfileId, forHandle }: UseProfileArgs) {
   return new NotFoundError(
     forProfileId
       ? `Profile with id: ${forProfileId}`
@@ -26,8 +26,14 @@ export type { ProfileRequest };
 /**
  * {@link useProfile} hook arguments
  */
-export type UseProfileArgs<TSuspense extends boolean = never> = OneOf<ProfileRequest> &
-  SuspenseEnabled<TSuspense>;
+export type UseProfileArgs = OneOf<ProfileRequest>;
+
+/**
+ * {@link useProfile} hook arguments with Suspense support
+ *
+ * @experimental This API can change without notice
+ */
+export type UseSuspenseProfileArgs = SuspenseEnabled<UseProfileArgs>;
 
 export type UseProfileResult =
   | ReadResult<Profile, NotFoundError | UnspecifiedError>
@@ -61,7 +67,7 @@ export type UseProfileResult =
 export function useProfile({
   forHandle,
   forProfileId,
-}: UseProfileArgs<never>): ReadResult<Profile, NotFoundError | UnspecifiedError>;
+}: UseProfileArgs): ReadResult<Profile, NotFoundError | UnspecifiedError>;
 
 /**
  * Fetches a Profile by either its full handle or id.
@@ -82,13 +88,13 @@ export function useProfile({
  * @param args - {@link UseProfileArgs}
  */
 export function useProfile(
-  args: UseProfileArgs<true>,
+  args: UseSuspenseProfileArgs,
 ): SuspenseResultWithError<Profile, NotFoundError>;
 
 export function useProfile({
   suspense = false,
   ...request
-}: UseProfileArgs<boolean>): UseProfileResult {
+}: UseProfileArgs & { suspense?: boolean }): UseProfileResult {
   invariant(
     request.forProfileId === undefined || request.forHandle === undefined,
     "Only one of 'forProfileId' or 'forHandle' should be provided to 'useProfile' hook",