add useEntitiesPublicInfinite hook (#552)

Author: nikgraf

.changeset/beige-lemons-beg.md

@@ -0,0 +1,6 @@
+---
+"@graphprotocol/hypergraph-react": patch
+---
+
+add useEntitiesPublicInfinite hook]
+  

apps/events/src/routeTree.gen.ts

@@ -23,10 +23,18 @@ import { Route as SpaceSpaceIdPlaygroundRouteImport } from './routes/space/$spac
 import { Route as SpaceSpaceIdEventsRouteImport } from './routes/space/$spaceId/events'
 import { Route as SpaceSpaceIdChatRouteImport } from './routes/space/$spaceId/chat'
 
+const PodcastsInfiniteLazyRouteImport = createFileRoute('/podcasts-infinite')()
 const PodcastsLazyRouteImport = createFileRoute('/podcasts')()
 const PlaygroundLazyRouteImport = createFileRoute('/playground')()
 const LoginLazyRouteImport = createFileRoute('/login')()
 
+const PodcastsInfiniteLazyRoute = PodcastsInfiniteLazyRouteImport.update({
+  id: '/podcasts-infinite',
+  path: '/podcasts-infinite',
+  getParentRoute: () => rootRouteImport,
+} as any).lazy(() =>
+  import('./routes/podcasts-infinite.lazy').then((d) => d.Route),
+)
 const PodcastsLazyRoute = PodcastsLazyRouteImport.update({
   id: '/podcasts',
   path: '/podcasts',
@@ -105,6 +113,7 @@ export interface FileRoutesByFullPath {
   '/login': typeof LoginLazyRoute
   '/playground': typeof PlaygroundLazyRoute
   '/podcasts': typeof PodcastsLazyRoute
+  '/podcasts-infinite': typeof PodcastsInfiniteLazyRoute
   '/account-inbox/$inboxId': typeof AccountInboxInboxIdRoute
   '/friends/$accountAddress': typeof FriendsAccountAddressRoute
   '/space/$spaceId': typeof SpaceSpaceIdRouteWithChildren
@@ -121,6 +130,7 @@ export interface FileRoutesByTo {
   '/login': typeof LoginLazyRoute
   '/playground': typeof PlaygroundLazyRoute
   '/podcasts': typeof PodcastsLazyRoute
+  '/podcasts-infinite': typeof PodcastsInfiniteLazyRoute
   '/account-inbox/$inboxId': typeof AccountInboxInboxIdRoute
   '/friends/$accountAddress': typeof FriendsAccountAddressRoute
   '/space/$spaceId/chat': typeof SpaceSpaceIdChatRoute
@@ -137,6 +147,7 @@ export interface FileRoutesById {
   '/login': typeof LoginLazyRoute
   '/playground': typeof PlaygroundLazyRoute
   '/podcasts': typeof PodcastsLazyRoute
+  '/podcasts-infinite': typeof PodcastsInfiniteLazyRoute
   '/account-inbox/$inboxId': typeof AccountInboxInboxIdRoute
   '/friends/$accountAddress': typeof FriendsAccountAddressRoute
   '/space/$spaceId': typeof SpaceSpaceIdRouteWithChildren
@@ -155,6 +166,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/playground'
     | '/podcasts'
+    | '/podcasts-infinite'
     | '/account-inbox/$inboxId'
     | '/friends/$accountAddress'
     | '/space/$spaceId'
@@ -171,6 +183,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/playground'
     | '/podcasts'
+    | '/podcasts-infinite'
     | '/account-inbox/$inboxId'
     | '/friends/$accountAddress'
     | '/space/$spaceId/chat'
@@ -186,6 +199,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/playground'
     | '/podcasts'
+    | '/podcasts-infinite'
     | '/account-inbox/$inboxId'
     | '/friends/$accountAddress'
     | '/space/$spaceId'
@@ -203,13 +217,21 @@ export interface RootRouteChildren {
   LoginLazyRoute: typeof LoginLazyRoute
   PlaygroundLazyRoute: typeof PlaygroundLazyRoute
   PodcastsLazyRoute: typeof PodcastsLazyRoute
+  PodcastsInfiniteLazyRoute: typeof PodcastsInfiniteLazyRoute
   AccountInboxInboxIdRoute: typeof AccountInboxInboxIdRoute
   FriendsAccountAddressRoute: typeof FriendsAccountAddressRoute
   SpaceSpaceIdRoute: typeof SpaceSpaceIdRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/podcasts-infinite': {
+      id: '/podcasts-infinite'
+      path: '/podcasts-infinite'
+      fullPath: '/podcasts-infinite'
+      preLoaderRoute: typeof PodcastsInfiniteLazyRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/podcasts': {
       id: '/podcasts'
       path: '/podcasts'
@@ -339,6 +361,7 @@ const rootRouteChildren: RootRouteChildren = {
   LoginLazyRoute: LoginLazyRoute,
   PlaygroundLazyRoute: PlaygroundLazyRoute,
   PodcastsLazyRoute: PodcastsLazyRoute,
+  PodcastsInfiniteLazyRoute: PodcastsInfiniteLazyRoute,
   AccountInboxInboxIdRoute: AccountInboxInboxIdRoute,
   FriendsAccountAddressRoute: FriendsAccountAddressRoute,
   SpaceSpaceIdRoute: SpaceSpaceIdRouteWithChildren,

apps/events/src/routes/__root.tsx

@@ -36,6 +36,9 @@ export const Route = createRootRoute({
                 <Link className="text-xs" to="/podcasts">
                   Podcasts
                 </Link>
+                <Link className="text-xs" to="/podcasts-infinite">
+                  Podcasts Infinite Query
+                </Link>
                 <Link className="text-xs" to="/playground">
                   Playground
                 </Link>

apps/events/src/routes/podcasts-infinite.lazy.tsx

@@ -0,0 +1,48 @@
+import { useEntitiesPublicInfinite } from '@graphprotocol/hypergraph-react';
+import { createLazyFileRoute } from '@tanstack/react-router';
+import { useEffect } from 'react';
+import { Podcast } from '@/schema';
+
+export const Route = createLazyFileRoute('/podcasts-infinite')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const space = 'e252f9e1-d3ad-4460-8bf1-54f93b02f220';
+
+  const { data, isLoading, isError, fetchNextPage } = useEntitiesPublicInfinite(Podcast, {
+    first: 2,
+    offset: 0,
+    space: space,
+    include: {
+      projects: {},
+    },
+  });
+
+  useEffect(() => {
+    setTimeout(() => {
+      fetchNextPage();
+      setTimeout(() => {
+        fetchNextPage();
+      }, 1000);
+    }, 1000);
+  }, [fetchNextPage]);
+  console.log({ data, isLoading, isError });
+
+  return (
+    <>
+      <h1>Podcasts</h1>
+      {isLoading && <div>Loading...</div>}
+      {isError && <div>Error</div>}
+      {data?.pages.map((page) => {
+        return page.data.map((podcast) => (
+          <div key={podcast.id}>
+            <h2>{podcast.name}</h2>
+            <hr />
+          </div>
+        ));
+      })}
+      {/* <pre className="text-xs">{JSON.stringify(data, null, 2)}</pre> */}
+    </>
+  );
+}

apps/events/src/routes/podcasts.lazy.tsx

@@ -11,8 +11,7 @@ function RouteComponent() {
 
   const { data, isLoading, isError } = useEntities(Podcast, {
     mode: 'public',
-    first: 6,
-    offset: 0,
+    first: 100,
     space: space,
     include: {
       projects: {},

packages/hypergraph-react/src/hooks/use-entities-public-infinite.ts

@@ -0,0 +1,45 @@
+import { Constants, Entity, Utils } from '@graphprotocol/hypergraph';
+import { useInfiniteQuery as useInfiniteQueryTanstack } from '@tanstack/react-query';
+import * as Option from 'effect/Option';
+import type * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+import type { QueryPublicParams } from '../internal/types.js';
+import { useHypergraphSpaceInternal } from '../internal/use-hypergraph-space-internal.js';
+
+export const useEntitiesPublicInfinite = <S extends Schema.Schema.AnyNoContext>(
+  type: S,
+  params?: QueryPublicParams<S>,
+) => {
+  const { enabled = true, filter, include, space: spaceFromParams, first = 2, offset = 0 } = params ?? {};
+  const { space: spaceFromContext } = useHypergraphSpaceInternal();
+  const space = spaceFromParams ?? spaceFromContext;
+
+  // constructing the relation type ids for the query
+  const relationTypeIds = Utils.getRelationTypeIds(type, include);
+
+  const typeIds = SchemaAST.getAnnotation<string[]>(Constants.TypeIdsSymbol)(type.ast as SchemaAST.TypeLiteral).pipe(
+    Option.getOrElse(() => []),
+  );
+
+  const result = useInfiniteQueryTanstack({
+    queryKey: [
+      'hypergraph-public-entities',
+      space,
+      typeIds,
+      relationTypeIds.level1,
+      relationTypeIds.level2,
+      filter,
+      'infinite',
+    ],
+    queryFn: async ({ pageParam }) => {
+      return Entity.findManyPublic(type, { filter, include, space, first, offset: pageParam });
+    },
+    getNextPageParam: (_lastPage, pages) => {
+      return offset + pages.length * first;
+    },
+    initialPageParam: offset,
+    enabled,
+  });
+
+  return result;
+};

packages/hypergraph-react/src/index.ts

@@ -8,6 +8,7 @@ export { HypergraphSpaceProvider } from './HypergraphSpaceContext.js';
 export { useCreateEntity } from './hooks/use-create-entity.js';
 export { useDeleteEntity } from './hooks/use-delete-entity.js';
 export { useEntities } from './hooks/use-entities.js';
+export { useEntitiesPublicInfinite } from './hooks/use-entities-public-infinite.js';
 export { useEntity } from './hooks/use-entity.js';
 export { useHardDeleteEntity } from './hooks/use-hard-delete-entity.js';
 export { usePrivyAuthCreatePrivateSpace as _usePrivyAuthCreatePrivateSpace } from './hooks/use-privy-auth-create-private-space.js';

packages/hypergraph-react/src/internal/types.ts

@@ -2,7 +2,7 @@ import type { Entity } from '@graphprotocol/hypergraph';
 import type * as Schema from 'effect/Schema';
 
 export type QueryPublicParams<S extends Schema.Schema.AnyNoContext> = {
-  enabled: boolean;
+  enabled?: boolean | undefined;
   filter?: Entity.EntityFilter<Schema.Schema.Type<S>> | undefined;
   // TODO: for multi-level nesting it should only allow the allowed properties instead of Record<string, Record<string, never>>
   include?: { [K in keyof Schema.Schema.Type<S>]?: Record<string, Record<string, never>> } | undefined;