feat: query block poc

packages/next/src/rsc/data/queries/prepareQuery.ts

@@ -15,7 +15,7 @@ export function prepareQuery<P>(
 	query: NextQueryProps<P>,
 	_config: HeadlessConfig | undefined = undefined,
 ) {
-	const { routeParams, ...rest } = query;
+	const { routeParams, handleError = true, ...rest } = query;
 
 	const path = routeParams?.path ?? '';
 	const siteConfig = routeParams?.site
@@ -45,5 +45,6 @@ export function prepareQuery<P>(
 		options,
 		path: pathname,
 		config: config ?? getHeadstartWPConfig(),
+		handleError,
 	};
 }

packages/next/src/rsc/data/queries/queryPosts.ts

@@ -7,14 +7,14 @@ export async function queryPosts<
 	T extends PostEntity = PostEntity,
 	P extends PostsArchiveParams = PostsArchiveParams,
 >(q: NextQueryProps<P> = {}, _config: HeadlessConfig | undefined = undefined) {
-	const { config, ...query } = prepareQuery<P>(q, _config);
+	const { config, handleError, ...query } = prepareQuery<P>(q, _config);
 
 	try {
 		const result = await fetchPosts<T, P>(query, config);
 
 		return result;
 	} catch (error) {
-		if (error instanceof Error) {
+		if (error instanceof Error && handleError) {
 			await handleFetchError(error, config, query.path);
 		}
 		throw error;

packages/next/src/rsc/data/queries/types.ts

@@ -6,4 +6,5 @@ export type NextQueryProps<P> = {
 		site?: string;
 		[k: string]: unknown;
 	};
+	handleError?: boolean;
 } & Omit<QueryProps<P>, 'path'>;

projects/wp-nextjs-app/src/app/(single)/[...path]/page.tsx

@@ -1,5 +1,6 @@
-import { BlocksRenderer, HtmlDecoder } from '@headstartwp/core/react';
+import { HtmlDecoder } from '@headstartwp/core/react';
 import { HeadstartWPRoute, queryPost } from '@headstartwp/next/app';
+import Blocks from '../../../components/Blocks';
 
 const Single = async ({ params }: HeadstartWPRoute) => {
 	const { data } = await queryPost({
@@ -20,7 +21,7 @@ const Single = async ({ params }: HeadstartWPRoute) => {
 				<HtmlDecoder html={data.post.title.rendered ?? ''} />
 			</h1>
 
-			<BlocksRenderer html={data.post.content.rendered ?? ''} />
+			<Blocks html={data.post.content.rendered ?? ''} />
 		</article>
 	);
 };

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

@@ -0,0 +1,18 @@
+import { BlocksRenderer } from '@headstartwp/core/react';
+import React from 'react';
+import { isBlockByName } from '@headstartwp/core';
+import { PostList } from './Blocks/PostList';
+
+type BlockProps = {
+	html: string;
+};
+
+const Blocks: React.FC<BlockProps> = ({ html }) => {
+	return (
+		<BlocksRenderer forwardBlockAttributes html={html}>
+			<PostList test={(node) => isBlockByName(node, 'core/query')} />
+		</BlocksRenderer>
+	);
+};
+
+export default Blocks;

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

@@ -0,0 +1,40 @@
+import { BlockProps } from '@headstartwp/core/react';
+import { queryPosts } from '@headstartwp/next/app';
+
+interface PostListProps
+	extends BlockProps<{ queryId: number; query: { perPage: number; postType: string } }> {}
+
+export const PostList: React.FC<PostListProps> = async ({ block }) => {
+	if (!block) {
+		return null;
+	}
+
+	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,
+	});
+
+	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>
+		</>
+	);
+};