@@ -611,19 +611,37 @@ describe(`useLiveInfiniteQuery`, () => {
611611 expect ( result . current . isReady ) . toBe ( true )
612612 } )
613613
614- // Try to fetch multiple times rapidly
614+ expect ( result . current . pages ) . toHaveLength ( 1 )
615+
616+ // With sync data, all fetches complete immediately, so all 3 calls will succeed
617+ // The key is that they won't cause race conditions or errors
615618 act ( ( ) => {
616619 result . current . fetchNextPage ( )
620+ } )
621+
622+ await waitFor ( ( ) => {
623+ expect ( result . current . pages ) . toHaveLength ( 2 )
624+ } )
625+
626+ act ( ( ) => {
617627 result . current . fetchNextPage ( )
628+ } )
629+
630+ await waitFor ( ( ) => {
631+ expect ( result . current . pages ) . toHaveLength ( 3 )
632+ } )
633+
634+ act ( ( ) => {
618635 result . current . fetchNextPage ( )
619636 } )
620637
621638 await waitFor ( ( ) => {
622- expect ( result . current . pages ) . toHaveLength ( 2 )
639+ expect ( result . current . pages ) . toHaveLength ( 4 )
623640 } )
624641
625- // Should only have fetched one additional page
626- expect ( result . current . pages ) . toHaveLength ( 2 )
642+ // All fetches should have succeeded
643+ expect ( result . current . pages ) . toHaveLength ( 4 )
644+ expect ( result . current . data ) . toHaveLength ( 40 )
627645 } )
628646
629647 it ( `should not fetch when hasNextPage is false` , async ( ) => {
@@ -793,4 +811,157 @@ describe(`useLiveInfiniteQuery`, () => {
793811 // No more pages available now
794812 expect ( result . current . hasNextPage ) . toBe ( false )
795813 } )
814+
815+ it ( `should set isFetchingNextPage to false when data is immediately available` , async ( ) => {
816+ const posts = createMockPosts ( 50 )
817+ const collection = createCollection (
818+ mockSyncCollectionOptions < Post > ( {
819+ id : `immediate-data-test` ,
820+ getKey : ( post : Post ) => post . id ,
821+ initialData : posts ,
822+ } )
823+ )
824+
825+ const { result } = renderHook ( ( ) => {
826+ return useLiveInfiniteQuery (
827+ ( q ) =>
828+ q
829+ . from ( { posts : collection } )
830+ . orderBy ( ( { posts : p } ) => p . createdAt , `desc` ) ,
831+ {
832+ pageSize : 10 ,
833+ getNextPageParam : ( lastPage ) =>
834+ lastPage . length === 10 ? lastPage . length : undefined ,
835+ }
836+ )
837+ } )
838+
839+ await waitFor ( ( ) => {
840+ expect ( result . current . isReady ) . toBe ( true )
841+ } )
842+
843+ // Initially 1 page and not fetching
844+ expect ( result . current . pages ) . toHaveLength ( 1 )
845+ expect ( result . current . isFetchingNextPage ) . toBe ( false )
846+
847+ // Fetch next page - should remain false because data is immediately available
848+ act ( ( ) => {
849+ result . current . fetchNextPage ( )
850+ } )
851+
852+ // Since data is *synchronously* available, isFetchingNextPage should be false
853+ expect ( result . current . pages ) . toHaveLength ( 2 )
854+ expect ( result . current . isFetchingNextPage ) . toBe ( false )
855+ } )
856+
857+ it ( `should track isFetchingNextPage when async loading is triggered` , async ( ) => {
858+ let loadSubsetCallCount = 0
859+
860+ const collection = createCollection < Post > ( {
861+ id : `async-loading-test` ,
862+ getKey : ( post : Post ) => post . id ,
863+ syncMode : `on-demand` ,
864+ startSync : true ,
865+ sync : {
866+ sync : ( { markReady, begin, write, commit } ) => {
867+ // Provide initial data
868+ begin ( )
869+ for ( let i = 1 ; i <= 15 ; i ++ ) {
870+ write ( {
871+ type : `insert` ,
872+ value : {
873+ id : `${ i } ,
874+ title : `Post ${ i } ,
875+ content : `Content ${ i } ,
876+ createdAt : 1000000 - i * 1000 ,
877+ category : i % 2 === 0 ? `tech` : `life` ,
878+ } ,
879+ } )
880+ }
881+ commit ( )
882+ markReady ( )
883+
884+ return {
885+ loadSubset : ( ) => {
886+ loadSubsetCallCount ++
887+
888+ // First few calls return true (initial load + window setup)
889+ if ( loadSubsetCallCount <= 2 ) {
890+ return true
891+ }
892+
893+ // Subsequent calls simulate async loading with a real timeout
894+ const loadPromise = new Promise < void > ( ( resolve ) => {
895+ setTimeout ( ( ) => {
896+ begin ( )
897+ // Load more data
898+ for ( let i = 16 ; i <= 30 ; i ++ ) {
899+ write ( {
900+ type : `insert` ,
901+ value : {
902+ id : `${ i } ,
903+ title : `Post ${ i } ,
904+ content : `Content ${ i } ,
905+ createdAt : 1000000 - i * 1000 ,
906+ category : i % 2 === 0 ? `tech` : `life` ,
907+ } ,
908+ } )
909+ }
910+ commit ( )
911+ resolve ( )
912+ } , 50 )
913+ } )
914+
915+ return loadPromise
916+ } ,
917+ }
918+ } ,
919+ } ,
920+ } )
921+
922+ const { result } = renderHook ( ( ) => {
923+ return useLiveInfiniteQuery (
924+ ( q ) =>
925+ q
926+ . from ( { posts : collection } )
927+ . orderBy ( ( { posts : p } ) => p . createdAt , `desc` ) ,
928+ {
929+ pageSize : 10 ,
930+ getNextPageParam : ( lastPage ) =>
931+ lastPage . length === 10 ? lastPage . length : undefined ,
932+ }
933+ )
934+ } )
935+
936+ await waitFor ( ( ) => {
937+ expect ( result . current . isReady ) . toBe ( true )
938+ } )
939+
940+ // Wait for initial window setup to complete
941+ await waitFor ( ( ) => {
942+ expect ( result . current . isFetchingNextPage ) . toBe ( false )
943+ } )
944+
945+ expect ( result . current . pages ) . toHaveLength ( 1 )
946+
947+ // Fetch next page which will trigger async loading
948+ act ( ( ) => {
949+ result . current . fetchNextPage ( )
950+ } )
951+
952+ // Should be fetching now and so isFetchingNextPage should be true *synchronously!*
953+ expect ( result . current . isFetchingNextPage ) . toBe ( true )
954+
955+ // Wait for loading to complete
956+ await waitFor (
957+ ( ) => {
958+ expect ( result . current . isFetchingNextPage ) . toBe ( false )
959+ } ,
960+ { timeout : 200 }
961+ )
962+
963+ // Should have 2 pages now
964+ expect ( result . current . pages ) . toHaveLength ( 2 )
965+ expect ( result . current . data ) . toHaveLength ( 20 )
966+ } , 10000 )
796967} )
0 commit comments