@elementor/editor-site-navigation 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.21.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.20.0...@elementor/editor-site-navigation@0.21.0) (2024-01-29)
+
+
+### Features
+
+* **editor-site-navigation:** pagination for pages panel ([#154](https://github.com/elementor/elementor-packages/issues/154)) ([1a1e1f4](https://github.com/elementor/elementor-packages/commit/1a1e1f46006988d10e0a7af292dbbc57644ed16f))
+
+
+
+
+
 # [0.20.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.19.11...@elementor/editor-site-navigation@0.20.0) (2024-01-07)
 
 

package/dist/index.js

@@ -358,17 +358,28 @@ var postTypesMap = {
     rest_base: "pages"
   }
 };
-var getRequest2 = (postTypeSlug) => {
+var POST_PER_PAGE = 10;
+var getRequest2 = async (postTypeSlug, page) => {
   const baseUri = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
   const keys = ["id", "type", "title", "link", "status", "user_can"];
   const queryParams = new URLSearchParams({
     status: "any",
-    per_page: "-1",
     order: "asc",
+    page: page.toString(),
+    per_page: POST_PER_PAGE.toString(),
     _fields: keys.join(",")
   });
   const uri = baseUri + "?" + queryParams.toString();
-  return (0, import_api_fetch4.default)({ path: uri });
+  const result = await (0, import_api_fetch4.default)({ path: uri, parse: false });
+  const data = await result.json();
+  const totalPages = Number(result.headers.get("x-wp-totalpages"));
+  const totalPosts = Number(result.headers.get("x-wp-total"));
+  return {
+    data,
+    totalPages,
+    totalPosts,
+    currentPage: page
+  };
 };
 var createRequest = (postTypeSlug, newPost) => {
   const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
@@ -408,11 +419,26 @@ var duplicateRequest = (originalPost) => {
 
 // src/hooks/use-posts.ts
 var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
+var flattenData = (data) => {
+  if (!data) {
+    return data;
+  }
+  const flattened = [];
+  data.pages.forEach((page) => {
+    flattened.push(...page.data);
+  });
+  return flattened;
+};
 function usePosts(postTypeSlug) {
-  return (0, import_query3.useQuery)({
+  const query = (0, import_query3.useInfiniteQuery)({
     queryKey: postsQueryKey(postTypeSlug),
-    queryFn: () => getRequest2(postTypeSlug)
+    queryFn: ({ pageParam = 1 }) => getRequest2(postTypeSlug, pageParam),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      return lastPage.currentPage < lastPage.totalPages ? lastPage.currentPage + 1 : void 0;
+    }
   });
+  return { ...query, data: { posts: flattenData(query.data), total: query.data?.pages[0]?.totalPosts ?? 0 } };
 }
 
 // src/contexts/post-list-context.tsx
@@ -503,7 +529,7 @@ function CollapsibleList({
       unmountOnExit: true
     },
     /* @__PURE__ */ React7.createElement(import_ui6.List, { dense: true }, children)
-  ), /* @__PURE__ */ React7.createElement(import_ui6.Divider, { sx: { my: 3 } }));
+  ), /* @__PURE__ */ React7.createElement(import_ui6.Divider, { sx: { mt: 1 } }));
 }
 
 // src/components/panel/posts-list/post-list-item.tsx
@@ -1157,7 +1183,7 @@ function ErrorState() {
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
-  const { data: posts, isLoading: postsLoading, isError: postsError } = usePosts(type);
+  const { data: { posts, total }, isLoading: postsLoading, isError: postsError, fetchNextPage, hasNextPage, isFetchingNextPage } = usePosts(type);
   const { data: homepageId } = useHomepage();
   if (postsError) {
     return /* @__PURE__ */ React23.createElement(ErrorState, null);
@@ -1173,7 +1199,7 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
       /* @__PURE__ */ React23.createElement(import_ui15.Skeleton, { sx: { my: 4 }, animation: "wave", variant: "rounded", width: "110px", height: "28px" })
     ), /* @__PURE__ */ React23.createElement(import_ui15.Box, null, /* @__PURE__ */ React23.createElement(import_ui15.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "100%", height: "24px" }), /* @__PURE__ */ React23.createElement(import_ui15.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React23.createElement(import_ui15.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React23.createElement(import_ui15.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" })));
   }
-  const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
+  const label = `${postTypesMap[type].labels.plural_name} (${total.toString()})`;
   const mappedPosts = posts.map((post) => {
     if (post.id === homepageId) {
       return { ...post, isHome: true };
@@ -1211,7 +1237,11 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
     sortedPosts.map((post) => {
       return /* @__PURE__ */ React23.createElement(PostListItem2, { key: post.id, post });
     }),
-    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React23.createElement(PostListItem2, null)
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React23.createElement(PostListItem2, null),
+    hasNextPage && /* @__PURE__ */ React23.createElement(import_ui15.Box, { sx: {
+      display: "flex",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ React23.createElement(import_ui15.Button, { onClick: fetchNextPage, color: "secondary" }, isFetchingNextPage ? /* @__PURE__ */ React23.createElement(import_ui15.CircularProgress, null) : "Load More"))
   )));
 }
 

package/dist/index.mjs

@@ -323,10 +323,10 @@ import { __ as __15 } from "@wordpress/i18n";
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 import * as React23 from "react";
 import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
-import { Skeleton, Box as Box4, List as List2 } from "@elementor/ui";
+import { Skeleton, Box as Box4, List as List2, Button as Button4, CircularProgress as CircularProgress5 } from "@elementor/ui";
 
 // src/hooks/use-posts.ts
-import { useQuery as useQuery3 } from "@elementor/query";
+import { useInfiniteQuery } from "@elementor/query";
 
 // src/api/post.ts
 import apiFetch4 from "@wordpress/api-fetch";
@@ -340,17 +340,28 @@ var postTypesMap = {
     rest_base: "pages"
   }
 };
-var getRequest2 = (postTypeSlug) => {
+var POST_PER_PAGE = 10;
+var getRequest2 = async (postTypeSlug, page) => {
   const baseUri = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
   const keys = ["id", "type", "title", "link", "status", "user_can"];
   const queryParams = new URLSearchParams({
     status: "any",
-    per_page: "-1",
     order: "asc",
+    page: page.toString(),
+    per_page: POST_PER_PAGE.toString(),
     _fields: keys.join(",")
   });
   const uri = baseUri + "?" + queryParams.toString();
-  return apiFetch4({ path: uri });
+  const result = await apiFetch4({ path: uri, parse: false });
+  const data = await result.json();
+  const totalPages = Number(result.headers.get("x-wp-totalpages"));
+  const totalPosts = Number(result.headers.get("x-wp-total"));
+  return {
+    data,
+    totalPages,
+    totalPosts,
+    currentPage: page
+  };
 };
 var createRequest = (postTypeSlug, newPost) => {
   const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
@@ -390,11 +401,26 @@ var duplicateRequest = (originalPost) => {
 
 // src/hooks/use-posts.ts
 var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
+var flattenData = (data) => {
+  if (!data) {
+    return data;
+  }
+  const flattened = [];
+  data.pages.forEach((page) => {
+    flattened.push(...page.data);
+  });
+  return flattened;
+};
 function usePosts(postTypeSlug) {
-  return useQuery3({
+  const query = useInfiniteQuery({
     queryKey: postsQueryKey(postTypeSlug),
-    queryFn: () => getRequest2(postTypeSlug)
+    queryFn: ({ pageParam = 1 }) => getRequest2(postTypeSlug, pageParam),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      return lastPage.currentPage < lastPage.totalPages ? lastPage.currentPage + 1 : void 0;
+    }
   });
+  return { ...query, data: { posts: flattenData(query.data), total: query.data?.pages[0]?.totalPosts ?? 0 } };
 }
 
 // src/contexts/post-list-context.tsx
@@ -485,7 +511,7 @@ function CollapsibleList({
       unmountOnExit: true
     },
     /* @__PURE__ */ React7.createElement(List, { dense: true }, children)
-  ), /* @__PURE__ */ React7.createElement(Divider2, { sx: { my: 3 } }));
+  ), /* @__PURE__ */ React7.createElement(Divider2, { sx: { mt: 1 } }));
 }
 
 // src/components/panel/posts-list/post-list-item.tsx
@@ -970,10 +996,10 @@ var updateSettings = (settings) => {
 };
 
 // src/hooks/use-homepage.ts
-import { useQuery as useQuery4 } from "@elementor/query";
+import { useQuery as useQuery3 } from "@elementor/query";
 var settingsQueryKey = () => ["site-navigation", "homepage"];
 function useHomepage() {
-  return useQuery4({
+  return useQuery3({
     queryKey: settingsQueryKey(),
     queryFn: () => getSettings()
   });
@@ -1171,7 +1197,7 @@ function ErrorState() {
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
-  const { data: posts, isLoading: postsLoading, isError: postsError } = usePosts(type);
+  const { data: { posts, total }, isLoading: postsLoading, isError: postsError, fetchNextPage, hasNextPage, isFetchingNextPage } = usePosts(type);
   const { data: homepageId } = useHomepage();
   if (postsError) {
     return /* @__PURE__ */ React23.createElement(ErrorState, null);
@@ -1187,7 +1213,7 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
       /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 4 }, animation: "wave", variant: "rounded", width: "110px", height: "28px" })
     ), /* @__PURE__ */ React23.createElement(Box4, null, /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "100%", height: "24px" }), /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" })));
   }
-  const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
+  const label = `${postTypesMap[type].labels.plural_name} (${total.toString()})`;
   const mappedPosts = posts.map((post) => {
     if (post.id === homepageId) {
       return { ...post, isHome: true };
@@ -1225,7 +1251,11 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
     sortedPosts.map((post) => {
       return /* @__PURE__ */ React23.createElement(PostListItem2, { key: post.id, post });
     }),
-    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React23.createElement(PostListItem2, null)
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React23.createElement(PostListItem2, null),
+    hasNextPage && /* @__PURE__ */ React23.createElement(Box4, { sx: {
+      display: "flex",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ React23.createElement(Button4, { onClick: fetchNextPage, color: "secondary" }, isFetchingNextPage ? /* @__PURE__ */ React23.createElement(CircularProgress5, null) : "Load More"))
   )));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.20.0",
+	"version": "0.21.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,13 +32,13 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.9.7",
+		"@elementor/editor-app-bar": "^0.9.8",
 		"@elementor/editor-documents": "^0.10.1",
-		"@elementor/editor-panels": "^0.4.6",
+		"@elementor/editor-panels": "^0.4.7",
 		"@elementor/editor-v1-adapters": "^0.6.0",
 		"@elementor/env": "^0.3.2",
 		"@elementor/icons": "^0.7.2",
-		"@elementor/query": "^0.1.6",
+		"@elementor/query": "^0.2.0",
 		"@elementor/ui": "^1.4.61",
 		"@wordpress/api-fetch": "^6.42.0",
 		"@wordpress/i18n": "^4.45.0",
@@ -50,5 +50,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "c80ed9336d2ce4f6c7626e0aa7d8f87cf50d0f42"
+	"gitHead": "780188b3bf19f2d02edabce30374f89b1fecbc07"
 }

package/src/api/post.ts

@@ -24,21 +24,49 @@ export const postTypesMap = {
 	},
 };
 
-export const getRequest = ( postTypeSlug: Slug ) => {
+export const POST_PER_PAGE = 10;
+
+type WpPostsResponse = {
+	json: () => Promise<Post[]>,
+	headers: {
+		get: ( key: string ) => string | null,
+	},
+}
+
+export type PostsResponse = {
+	data: Post[],
+	totalPages: number,
+	totalPosts: number,
+	currentPage: number,
+};
+
+export const getRequest = async ( postTypeSlug: Slug, page: number ): Promise<PostsResponse> => {
 	const baseUri = `/wp/v2/${ postTypesMap[ postTypeSlug ].rest_base }`;
 
 	const keys: Array<keyof Post> = [ 'id', 'type', 'title', 'link', 'status', 'user_can' ];
 
 	const queryParams = new URLSearchParams( {
 		status: 'any',
-		per_page: '-1',
 		order: 'asc',
+		page: page.toString(),
+		per_page: POST_PER_PAGE.toString(),
 		_fields: keys.join( ',' ),
 	} );
 
 	const uri = baseUri + '?' + queryParams.toString();
 
-	return apiFetch<Post[]>( { path: uri } );
+	const result = await apiFetch<WpPostsResponse>( { path: uri, parse: false } );
+	const data = await result.json();
+
+	const totalPages = Number( result.headers.get( 'x-wp-totalpages' ) );
+	const totalPosts = Number( result.headers.get( 'x-wp-total' ) );
+
+	return {
+		data,
+		totalPages,
+		totalPosts,
+		currentPage: page,
+	};
 };
 
 export const createRequest = ( postTypeSlug: Slug, newPost: NewPost ) => {

package/src/components/panel/posts-list/__tests__/posts-collapsible-list.test.tsx

@@ -4,6 +4,7 @@ import PostsCollapsibleList from '../posts-collapsible-list';
 import { createMockDocument, renderWithQuery } from 'test-utils';
 import { PostListContextProvider } from '../../../../contexts/post-list-context';
 import { __useActiveDocument as useActiveDocument } from '@elementor/editor-documents';
+import { usePosts } from '../../../../hooks/use-posts';
 
 const mockMutateAsync = jest.fn();
 jest.mock( '../../../../hooks/use-posts-actions', () => ( {
@@ -23,10 +24,13 @@ jest.mock( '../../../../hooks/use-posts', () => ( {
 	__esModule: true,
 	usePosts: jest.fn( () => ( {
 		isLoading: false,
-		data: [
-			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'publish', link: 'www.test.demo', user_can: { edit: true } },
-			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'draft', link: 'www.test.demo', user_can: { edit: true } },
-		],
+		data: {
+			posts: [
+				{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'publish', link: 'www.test.demo', user_can: { edit: true, delete: true } },
+				{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'draft', link: 'www.test.demo', user_can: { edit: true, delete: true } },
+			],
+			total: 2,
+		},
 	} ) ),
 } ) );
 
@@ -156,4 +160,42 @@ describe( '@elementor/editor-site-navigation - PostsCollapsibleList', () => {
 		expect( input ).toBeInTheDocument();
 		expect( input ).toHaveValue( 'Home copy' );
 	} );
+
+	it( 'Should not render load button when there is no next page', () => {
+		// Arrange.
+		jest.mocked( usePosts ).mockReturnValue( {
+			hasNextPage: false,
+			isLoading: false,
+			data: {
+				posts: [
+					{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'publish', link: 'www.test.demo', user_can: { edit: true, delete: true } },
+					{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'draft', link: 'www.test.demo', user_can: { edit: true, delete: true } },
+				],
+				total: 2,
+			},
+		} as ReturnType<typeof usePosts> );
+		renderWithQuery( <PostsCollapsibleList isOpenByDefault={ true } /> );
+
+		// Assert.
+		expect( screen.queryByRole( 'button', { name: 'Load More' } ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'Should render load button when there is next page', () => {
+		// Arrange.
+		jest.mocked( usePosts ).mockReturnValue( {
+			hasNextPage: true,
+			isLoading: false,
+			data: {
+				posts: [
+					{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'publish', link: 'www.test.demo', user_can: { edit: true, delete: true } },
+					{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'draft', link: 'www.test.demo', user_can: { edit: true, delete: true } },
+				],
+				total: 2,
+			},
+		} as ReturnType<typeof usePosts> );
+		renderWithQuery( <PostsCollapsibleList isOpenByDefault={ true } /> );
+
+		// Assert.
+		expect( screen.getByRole( 'button', { name: 'Load More' } ) ).toBeInTheDocument();
+	} );
 } );

package/src/components/panel/posts-list/collapsible-list.tsx

@@ -70,7 +70,7 @@ export default function CollapsibleList(
 					{ children }
 				</List>
 			</Collapse>
-			<Divider sx={ { my: 3 } } />
+			<Divider sx={ { mt: 1 } } />
 		</>
 	);
 }

package/src/components/panel/posts-list/posts-collapsible-list.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PageTypeIcon } from '@elementor/icons';
-import { Skeleton, Box, List } from '@elementor/ui';
+import { Skeleton, Box, List, Button, CircularProgress } from '@elementor/ui';
 import { usePosts } from '../../../hooks/use-posts';
 import { usePostListContext } from '../../../contexts/post-list-context';
 import { postTypesMap } from '../../../api/post';
@@ -16,7 +16,7 @@ type Props = {
 
 export default function PostsCollapsibleList( { isOpenByDefault = false }: Props ) {
 	const { type, editMode } = usePostListContext();
-	const { data: posts, isLoading: postsLoading, isError: postsError } = usePosts( type );
+	const { data: { posts, total }, isLoading: postsLoading, isError: postsError, fetchNextPage, hasNextPage, isFetchingNextPage } = usePosts( type );
 	const { data: homepageId } = useHomepage();
 
 	if ( postsError ) {
@@ -43,7 +43,7 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 		);
 	}
 
-	const label = `${ postTypesMap[ type ].labels.plural_name } (${ posts.length.toString() })`;
+	const label = `${ postTypesMap[ type ].labels.plural_name } (${ total.toString() })`;
 
 	const mappedPosts = posts.map( ( post ) => {
 		if ( post.id === homepageId ) {
@@ -91,6 +91,16 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 						[ 'duplicate', 'create' ].includes( editMode.mode ) &&
 						<PostListItem />
 					}
+					{ hasNextPage &&
+						<Box sx={ {
+							display: 'flex',
+							justifyContent: 'center',
+						} }>
+							<Button onClick={ fetchNextPage } color="secondary">
+								{ isFetchingNextPage ? <CircularProgress /> : 'Load More' }
+							</Button>
+						</Box>
+					}
 				</CollapsibleList>
 			</List>
 		</>

package/src/hooks/__tests__/use-posts.test.ts

@@ -2,42 +2,76 @@ import { waitFor } from '@testing-library/react';
 import apiFetch from '@wordpress/api-fetch';
 import { renderHookWithQuery } from 'test-utils';
 import { usePosts } from '../use-posts';
+import { POST_PER_PAGE } from '../../api/post';
 
-jest.mock( '@wordpress/api-fetch' );
+const MOCK_POST_PER_PAGE = 2;
 
-describe( '@elementor/site-settings/use-posts', () => {
-	beforeEach( () => {
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( [] ) );
-	} );
+jest.mock( '@wordpress/api-fetch', () => ( {
+	default: jest.fn( ( param ) => {
+		const pages = [
+			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'draft', link: 'www.test.demo' },
+			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'publish', link: 'www.test.demo' },
+			{ id: 3, type: 'page', title: { rendered: 'Services' }, status: 'publish', link: 'www.test.demo', isHome: true },
+		];
+
+		const url = new URL( 'http:/example.com' + param.path );
+
+		const page = Number( url.searchParams.get( 'page' ) );
 
+		const startIndex = ( page - 1 ) * MOCK_POST_PER_PAGE;
+		const endIndex = startIndex + MOCK_POST_PER_PAGE;
+		const paginatedPages = pages.slice( startIndex, endIndex );
+
+		return {
+			json: () => Promise.resolve( paginatedPages ),
+			headers: {
+				get: ( header: string ) => {
+					switch ( header ) {
+						case 'x-wp-totalpages':
+							return Math.ceil( pages.length / MOCK_POST_PER_PAGE );
+						case 'x-wp-total':
+							return pages.length;
+						default:
+							return null;
+					}
+				},
+			},
+		};
+	} ),
+	__esModule: true,
+} ) );
+
+describe( '@elementor/site-settings/use-posts', () => {
 	afterEach( () => {
 		jest.clearAllMocks();
 	} );
 
 	it( 'usePosts hook should return posts list by type', async () => {
-		// Arrange.
+		//Arrange
 		const pages = [
 			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'draft', link: 'www.test.demo' },
 			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'publish', link: 'www.test.demo' },
 			{ id: 3, type: 'page', title: { rendered: 'Services' }, status: 'publish', link: 'www.test.demo', isHome: true },
 		];
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( pages ) );
 
 		// Act.
 		const { component } = renderHookWithQuery( () => usePosts( 'page' ) );
 
 		// Assert.
-		const expectedPath = `/wp/v2/pages?status=any&per_page=-1&order=asc&_fields=${ encodeURIComponent( 'id,type,title,link,status,user_can' ) }`;
+		const expectedPath = `/wp/v2/pages?status=any&order=asc&page=1&per_page=${ POST_PER_PAGE }&_fields=${ encodeURIComponent( 'id,type,title,link,status,user_can' ) }`;
 
 		expect( apiFetch ).toHaveBeenCalledWith( {
+			parse: false,
 			path: expectedPath,
 		} );
 		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
 
 		await waitFor( () => {
-			return component.result.current.isSuccess;
+			expect( component.result.current.isLoading ).toBeFalsy();
 		} );
 
-		expect( component.result.current.data ).toBe( pages );
+		expect( component.result.current.data.posts ).toContainEqual( pages[ 0 ] );
+		expect( component.result.current.data.posts ).toContainEqual( pages[ 1 ] );
+		expect( component.result.current.data.posts ).not.toContainEqual( pages[ 2 ] );
 	} );
 } );

package/src/hooks/use-posts.ts

@@ -1,11 +1,32 @@
-import { useQuery } from '@elementor/query';
-import { getRequest, Slug } from '../api/post';
+import { useInfiniteQuery } from '@elementor/query';
+import { getRequest, PostsResponse, Slug } from '../api/post';
+import { Post } from '../types';
 
 export const postsQueryKey = ( postTypeSlug: string ) => [ 'site-navigation', 'posts', postTypeSlug ];
 
+const flattenData = ( data?: {pages: PostsResponse[]} ) => {
+	if ( ! data ) {
+		return data;
+	}
+
+	const flattened: Post[] = [];
+
+	data.pages.forEach( ( page ) => {
+		flattened.push( ...page.data );
+	} );
+
+	return flattened;
+};
+
 export function usePosts( postTypeSlug: Slug ) {
-	return useQuery( {
+	const query = useInfiniteQuery( {
 		queryKey: postsQueryKey( postTypeSlug ),
-		queryFn: () => getRequest( postTypeSlug ),
+		queryFn: ( { pageParam = 1 } ) => getRequest( postTypeSlug, pageParam ),
+		initialPageParam: 1,
+		getNextPageParam: ( lastPage ) => {
+			return lastPage.currentPage < lastPage.totalPages ? lastPage.currentPage + 1 : undefined;
+		},
 	} );
+
+	return { ...query, data: { posts: flattenData( query.data ), total: query.data?.pages[ 0 ]?.totalPosts ?? 0 } };
 }