feat: try/catch

projects/wp-nextjs-app/src/components/Blocks/PostList.tsx

@@ -11,30 +11,34 @@ export const PostList: React.FC<PostListProps> = async ({ block }) => {
 
 	const { query } = block.attributes;
 
-	const {
-		data: { posts },
-	} = await queryPosts({
-		// todo: map the rest of the query object
-		params: { per_page: query.perPage, postType: query.postType },
-		// setting handle error to false will disable automatic handling of errors
-		// i.e you have to handle the error yourself
-		handleError: false,
-	});
+	try {
+		const {
+			data: { posts },
+		} = await queryPosts({
+			// todo: map the rest of the query object
+			params: { per_page: query.perPage, postType: query.postType },
+			// setting handle error to false will disable automatic handling of errors
+			// i.e you have to handle the error yourself
+			handleError: false,
+		});
 
-	return (
-		<>
-			<h2>Post List</h2>
-			<pre>
-				<code>{JSON.stringify({ query }, null, 2)}</code>
-			</pre>
+		return (
+			<>
+				<h2>Post List</h2>
+				<pre>
+					<code>{JSON.stringify({ query }, null, 2)}</code>
+				</pre>
 
-			<ul>
-				{posts.map((post) => (
-					<li key={post.id}>
-						#{post.id} -{post.title.rendered}
-					</li>
-				))}
-			</ul>
-		</>
-	);
+				<ul>
+					{posts.map((post) => (
+						<li key={post.id}>
+							#{post.id} -{post.title.rendered}
+						</li>
+					))}
+				</ul>
+			</>
+		);
+	} catch (e) {
+		return 'no posts found';
+	}
 };