fix: Add is404 flag for 404ed routes

.changeset/tame-beans-pay.md

@@ -0,0 +1,5 @@
+---
+"@snapwp/query": patch
+---
+
+fix: Add is404 flag for 404ed routes

examples/nextjs/starter/src/app/[[...path]]/page.tsx

@@ -4,7 +4,7 @@ import { EditorBlocksRenderer } from '@snapwp/blocks';
 export default function Page() {
 	return (
 		<TemplateRenderer>
-			{ ( editorBlocks ) => {
+			{ ( { editorBlocks, is404 } ) => {
 				return <EditorBlocksRenderer editorBlocks={ editorBlocks } />;
 			} }
 		</TemplateRenderer>

packages/next/src/middleware/current-path.ts

@@ -1,22 +1,60 @@
+import { NextResponse } from 'next/server';
+import { addTrailingSlash } from '@snapwp/core';
+import { getConfig } from '@snapwp/core/config';
+import { QueryEngine } from '@snapwp/query';
 import type { MiddlewareFactory } from './utils';
 import type { NextFetchEvent, NextMiddleware, NextRequest } from 'next/server';
 
 /**
  * Middleware function for Next.js
  *
- * This middleware adds a custom header 'x-current-path' to the response,
- * which contains the current pathname of the request.
+ * This middleware adds custom headers 'x-current-path' and 'x-snapwp-is404' to the response,
+ * which contains the current pathname of the request, and the 404 status.
  *
  * @param {NextMiddleware} next Next middleware.
  *
  * @return The response object with modified headers
  */
 export const currentPath: MiddlewareFactory = ( next: NextMiddleware ) => {
 	return async ( request: NextRequest, _next: NextFetchEvent ) => {
+		const pathname = request.nextUrl.pathname;
+
+		const { uploadsDirectory, restUrlPrefix } = getConfig();
+
+		const shouldSkip =
+			pathname.startsWith( '/_next/' ) ||
+			pathname.startsWith( '/api/' ) ||
+			pathname.startsWith( addTrailingSlash( uploadsDirectory ) ) || // handled by `proxies` middleware
+			pathname.startsWith( restUrlPrefix ) || // handled by `proxies` middleware
+			pathname === '/wp-admin/admin-ajax.php' || // handled by `proxies` middleware
+			pathname.match(
+				/\.(js|css|png|jpg|jpeg|gif|svg|webp|mp4|webm|woff|woff2|ttf|eot|ico)$/
+			);
+
+		if ( shouldSkip ) {
+			return next( request, _next );
+		}
+
+		let is404 = false;
+		try {
+			const { is404: fetchedIs404 } = await QueryEngine.getTemplateData(
+				pathname || '/'
+			);
+			is404 = fetchedIs404;
+		} catch ( error ) {}
+
 		const response = await next( request, _next );
 
 		if ( response ) {
-			response.headers.set( 'x-current-path', request.nextUrl.pathname );
+			response.headers.set( 'x-current-path', pathname );
+			response.headers.set( 'x-snapwp-is404', String( is404 ) );
+
+			if ( is404 ) {
+				return new NextResponse( response.body, {
+					status: 404,
+					headers: response.headers,
+				} );
+			}
 		}
 
 		return response;

packages/next/src/template-renderer/index.tsx

@@ -9,7 +9,10 @@ import type { ReactNode } from 'react';
 
 export type TemplateRendererProps = {
 	getTemplateData?: ( typeof QueryEngine )[ 'getTemplateData' ];
-	children: ( editorBlocks: BlockData[] ) => ReactNode;
+	children: ( args: {
+		editorBlocks: BlockData[];
+		is404: boolean;
+	} ) => ReactNode;
 };
 
 /**
@@ -29,8 +32,14 @@ export async function TemplateRenderer( {
 	const headerList = await headers(); // headers() returns a Promise from NextJS 19.
 	const pathname = headerList.get( 'x-current-path' );
 
-	const { editorBlocks, bodyClasses, stylesheets, scripts, scriptModules } =
-		await getTemplateData( pathname || '/' );
+	const {
+		editorBlocks,
+		bodyClasses,
+		stylesheets,
+		scripts,
+		scriptModules,
+		is404,
+	} = await getTemplateData( pathname || '/' );
 
 	if ( ! editorBlocks?.length ) {
 		throw new Error(
@@ -48,7 +57,7 @@ export async function TemplateRenderer( {
 			>
 				<main>
 					<div className="wp-site-blocks">
-						{ children( editorBlocks ) }
+						{ children( { editorBlocks, is404 } ) }
 					</div>
 				</main>
 			</TemplateScripts>

packages/query/src/queries/get-current-template.graphql

@@ -126,5 +126,8 @@ query GetCurrentTemplate($uri: String!) {
 				...CoreVideoFrag
 			}
 		}
+		connectedNode {
+			id
+		}
 	}
 }

packages/query/src/query-engine/index.ts

@@ -168,6 +168,7 @@ export class QueryEngine {
 		scripts: EnqueuedScriptProps[] | undefined;
 		scriptModules: ScriptModuleProps[] | undefined;
 		bodyClasses: string[] | undefined;
+		is404: boolean;
 	} > => {
 		if ( ! QueryEngine.isClientInitialized ) {
 			QueryEngine.initialize();

packages/query/src/utils/parse-template.ts

@@ -29,6 +29,7 @@ export function parseQueryResult(
 	scripts: EnqueuedScriptProps[] | undefined;
 	scriptModules: ScriptModuleProps[] | undefined;
 	bodyClasses: string[] | undefined;
+	is404: boolean;
 } {
 	if ( queryData.errors?.length ) {
 		queryData.errors?.forEach( ( error ) => {
@@ -51,13 +52,15 @@ export function parseQueryResult(
 	}
 
 	const templateByUri = queryData.data?.templateByUri;
+	const is404 = templateByUri?.connectedNode === null;
 
 	return {
 		stylesheets: parseEnqueuedStylesheets( wordpressUrl, templateByUri ),
 		editorBlocks: parseEditorBlocks( templateByUri ),
 		scripts: parseEnqueuedScripts( templateByUri, wordpressUrl ),
 		scriptModules: parseScriptModules( templateByUri, wordpressUrl ),
 		bodyClasses: parseBodyClasses( templateByUri ),
+		is404,
 	};
 }
 

packages/query/src/utils/tests/parse-template.test.ts

@@ -85,6 +85,7 @@ describe( 'parseQueryResult', () => {
 				{ src: 'https://cdn.com/script.js', handle: 'cdn-script' },
 			],
 			bodyClasses: [ 'class1', 'class2' ],
+			is404: false,
 		} );
 	} );
 
@@ -106,4 +107,74 @@ describe( 'parseQueryResult', () => {
 			{ message: 'Critical error occurred' }
 		);
 	} );
+
+	it( 'should return is404 true if `templateByUri.connectedNode` is null', () => {
+		const queryData: ApolloQueryResult< GetCurrentTemplateQuery > = {
+			data: {
+				templateByUri: {
+					bodyClasses: [ 'class1', 'class2' ],
+					enqueuedScripts: {
+						nodes: [
+							{
+								id: '122',
+								src: '/script.js',
+								handle: 'test-script',
+							},
+							{
+								id: '123',
+								src: 'https://cdn.com/script.js',
+								handle: 'cdn-script',
+							},
+						],
+					},
+					enqueuedStylesheets: {
+						nodes: [
+							{
+								src: '/style.css',
+								handle: 'test-style',
+								before: [ 'before-content' ],
+								after: [ 'after-content' ],
+							},
+						],
+					},
+					editorBlocks: [
+						{
+							type: 'core/paragraph',
+							renderedHtml: '<p>Text</p>',
+						},
+					],
+					connectedNode: null,
+				},
+			},
+			errors: [],
+			loading: false,
+			networkStatus: 7,
+		};
+
+		const result = parseQueryResult( queryData, wordpressUrl, uri );
+
+		expect( result ).toEqual( {
+			stylesheets: [
+				{
+					src: 'https://test.com/style.css',
+					handle: 'test-style',
+					before: 'before-content',
+					after: 'after-content',
+				},
+			],
+			editorBlocks: [
+				{
+					type: 'core/paragraph',
+					renderedHtml: '<p>Text</p>',
+				},
+			],
+			scriptModules: undefined,
+			scripts: [
+				{ src: 'https://test.com/script.js', handle: 'test-script' },
+				{ src: 'https://cdn.com/script.js', handle: 'cdn-script' },
+			],
+			bodyClasses: [ 'class1', 'class2' ],
+			is404: true,
+		} );
+	} );
 } );